使用Javascript/Jquery移动节点Div Up和Down

Question

我想知道Javascript中是否有一种方法可以在没有id的情况下上下移动节点div元素.当选择该项目并右键单击时,会有"上移"和"下移"选项,现在在"上移"中单击它应该在div中上移.

例如..

<div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>

        </div>

假设我右键单击div 3,然后Move Up选项将在那里点击Move Up它应该向上移动并且新序列应该是

 <div>
        <div>1</div>
        <div>3</div>
        <div>2</div>
        <div>4</div>
        <div>5</div>

    </div> 

感谢帮助.

Answer 1

这是一些例子.试试 Demo.

单击项目以选择它.

<div id='items'>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>

        </div>

<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>

Jquery库

将此库添加到您的页面

<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.0.min.js'></script>

jQuery的

$(document).ready(function(){
    var selected=0;

     var itemlist = $('#items');
    var len=$(itemlist).children().length; 

    $("#items div").click(function(){
        selected= $(this).index();
        alert("Selected item is " + $(this).text());
    });


     $("#up").click(function(e){
       e.preventDefault();
       if(selected>0)
        {
            jQuery($(itemlist).children().eq(selected-1)).before(jQuery($(itemlist).children().eq(selected)));
            selected=selected-1;
        }
    });

     $("#down").click(function(e){
         e.preventDefault();
        if(selected < len)
        {
            jQuery($(itemlist).children().eq(selected+1)).after(jQuery($(itemlist).children().eq(selected)));
            selected=selected+1;
        }
    });

});

Answer 2

这是代码.右键单击列表项并向上或向下移动. HTML

<div class="block">
  <div>
    <div class="contextMenu">
        <ul>
            <li data-sort="up">Up</li>
            <li data-sort="down">Down</li>
        </ul>
    </div>
    1</div>
  <div>
    <div class="contextMenu">
        <ul>
            <li data-sort="up">Up</li>
            <li data-sort="down">Down</li>
        </ul>
    </div>
  2</div>
  <div>
    <div class="contextMenu">
        <ul>
            <li data-sort="up">Up</li>
            <li data-sort="down">Down</li>
        </ul>
    </div>
  3</div>
  <div>
    <div class="contextMenu">
        <ul>
            <li data-sort="up">Up</li>
            <li data-sort="down">Down</li>
        </ul>
    </div>
  4</div>
  <div>
    <div class="contextMenu test">
        <ul>
            <li data-sort="up">Up</li>
            <li data-sort="down">Down</li>
        </ul>
    </div>
  5</div>
</div>

CSS

.block {width:300px;}
.block > div { border:1px solid #e5e5e5; position:relative;}
.contextMenu{ position:absolute; font-size:11px; width:50px; background:#e5e5e5; z-index:999; display:none;}
.contextMenu ul{margin:0; padding:0; list-style:none;}
.contextMenu li{border:1px solid #666; padding:5px;}

脚本

$('.block > div').mousedown(function(e){ 
    if( e.button == 2 ){
        $(this).find('.contextMenu').show().end().siblings('div').find('.contextMenu').hide();
    };
})

$('.contextMenu li').on('click', function(){
        var parentDiv = $(this).closest('div.contextMenu').parent(),
            dir = $(this).data('sort');

    if(dir === 'up'){
        parentDiv.insertBefore( parentDiv.prev() )
    } else if(dir === 'down'){
        parentDiv.insertAfter( parentDiv.next() )
    }
    $('.contextMenu').hide()
});

Fiddle Demo