对一个列表内节点进行拖拽排序

Posted on 2022-09-26 23:34 火冰·瓶阅读(26) 评论(0) 编辑收藏举报

HTML5属性 draggable可以让元素变成可拖动

1	`<li draggable="true">1</li>`

该属性有三个值可选：true | false | auto

true：表示可拖动
false: 表示不可拖动
auto: 表示浏览器默认行为

拖动事件：

拖动的元素上触发：事件皆由拖动元素监听

ondragstart: 用户开始拖拉元素的时候触发
ondrag: 元素拖动过程中触发
ondragend: 用户完成元素拖动后触发

释放所位于的元素（容器）上触发：事件皆由容器元素监听

ondragenter:当拖动元素进入容器中时触发
ondragover:当拖动元素在容器中拖动过程中触发
ondrop:在容器中，释放拖拉时触发

思路：
先设定ul里面元素可以拖动需要为其设置draggable属性
每一个li都可拖动，但不必为每个li绑定事件，直接使用ondragstart事件委托，直接给ul来触发
使用ondragover事件拖动li过程中触发，当前li的index大于容器li时就插入在容器的前面，反之插入在容器的后面，
ul元素有一个属性previousElementSibling，表示该元素前面的一个元素，在索引进行比较，然后根据结果处理元素

<ul id="ondragstart">
    <li draggable="true">1</li>
    <li draggable="true">2</li>
    <li draggable="true">3</li>
    <li draggable="true">4</li>
    <li draggable="true">5</li>
    <li draggable="true">6</li>
    <li draggable="true">7</li>
    <li draggable="true">8</li>
</ul>
  
<script>
    var node = document.getElementById("ondragstart");
    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;
    }
</script>