JavaScript中的排序元素

Question

我有一个可以拖放的节点列表。

<ul id="container">
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>
<li id="item_5">Item 5</li>
<li id="item_6">Item 6</li>
</ul>

我可以将＃item_5单击并拖动到＃item_2顶部和“放置”上，我可以返回源（＃item_5），然后将项目放下（＃item2）

我将如何在目标（＃item_2）之前插入放置的项目（＃item_5），然后调整第2项后的每个节点返回一个位置？我需要有关执行此任务的方法的帮助]

例如

function movebefore(a, b) {...}

（（请假定使用jQuery cannot之类的javascript框架）

实际代码：http://jsfiddle.net/danmasq/BkNAF/

Answer 1

function movebefore(a, b) { // If "a" is the node you're dragging and "b" is the node on top of which you dropped "a"
    b.parentNode.insertBefore(a, b); // Or "b.nextSibling", depending on what you want to do
}

就这么简单！ DOM将负责从先前位置移除元素并调整其他元素。

Answer 2

dropNode是放置目标dragNode是要拖动的节点你提到你们两个都有。

var movebefore = function( dragNode , dropNode ) {

    dropNode.parentNode.insertBefore( dragNode , dropNode );

}