拖拽排序

### 应用场景

<ul id="container">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

希望鼠标可以拖动列表li元素，进行排序。

解决思路：

当元素节点属性draggable为true时，可以被鼠标拖动。

利用关于drag事件的监听器：

1. ondragstart

在元素被拖动时触发

2. ondragover

在元素上方有元素被拖动过来时触发

将drag事件委托在容器ul上，判断当有元素拖过来时，判断是前插入还是后插入。

js代码：

function createDragable(node) {
    node.childNodes.forEach(node => {
        node.draggable = true
    })

    let draging = null;

    node.addEventListener('dragstart', event => {
        draging = event.target;
    })

    node.addEventListener('dragover', event => {
        const target = event.target;
        if (target.nodeName === "LI") {
            if (getIndex(draging) < getIndex(target)) {
                target.parentNode.insertBefore(draging, target.nextSibling);
            } else {
                target.parentNode.insertBefore(draging, target);
            }
        }
    })

    const getIndex = el => {
        let index = 0;
        while (el) {
            index++;
            el = el.previousElementSibling;
        }
        return index;
    }
}

createDragable(document.querySelector("#container"))