使用Javascript / Jquery向上和向下移动节点Div

Question

我想知道Javascript中是否有一种方法可以仅在不使用id的情况下上下移动node div元素。 当选中该项目并右键单击时，将有“上移”和“下移”选项，现在在“上移”上单击时，它应在div中向上移动。

例如..

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

        </div>

假设我在div 3上单击鼠标右键，然后会出现“上移”选项，因此在单击“上移”时，它应该“上移”并且新的序列应该是

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

    </div> 

感谢帮助。

Answer 1

这是一些例子。 尝试演示 。

单击项目以将其选中。

<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()
});

小提琴演示

Answer 3

这可能不完全是您想要的答案，但是在查看要实现的目标时，您可以使用jQuery UI Sortable

example here ： 小提琴

Answer 4

$("#downButton").click(function() {
    var selectedRows = $('#tblValues tr').find("td:first").find("input:checked").parents('tr');
    $(selectedRows).each(function(index, item) {
        $(item).insertAfter($(item).next());
    });
});