draggable属性 true是可以拖动 flase不能拖动 <li draggable="flase">
第一行的#ul换成ul的id
var node = document.querySelector("#ul");
var draging = null;
//使用事件委托,将li的事件委托给ul
node.ondragstart = function (event) {
//firefox设置了setData后元素才能拖动!!!!
event.dataTransfer.setData("te", event.target.innerText); //不能使用text,firefox会打开新tab
draging = event.target;
}
node.ondragover = function (event) {
event.preventDefault();
var target = event.target;
//因为dragover会发生在ul上,所以要判断是不是li
if (target.nodeName === "LI" && target !== draging) {
//_index是实现的获取index
if (_index(draging) < _index(target)) {
target.parentNode.insertBefore(draging, target.nextSibling);
} else {
target.parentNode.insertBefore(draging, target);
}
}
}
function _index(el) {
var index = 0;
if (!el || !el.parentNode) {
return -1;
}
while (el && (el = el.previousElementSibling)) {
index++;
}
return index;
}