h5拖拽div排序 draggable方法实现

利用h5的 draggable属性实现拖放排序

 <div draggable="true" ondragstart="dragStart(event)" id="woshi1" ondragover="allowDrop(event)" ondrop="drop(event)"> 我是1</div>
 <div draggable="true" ondragstart="dragStart(event)" id="woshi2" ondragover="allowDrop(event)" ondrop="drop(event)"> 我是2</div>
    <script>
        let dragEl = null;
        // 移动开始
        function dragStart(e) {
            dragEl = e.target;
            e.dataTransfer.effectAllowed = "move";
            e.dataTransfer.setData("text", e.target.outerHTML);
        }
        // 移动中
        function allowDrop(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.dataTransfer.dropEffect = 'move';
            return false;
        }
        // 移动放置
        function drop(e) {
            if (dragEl != e.target) {
                dragEl.outerHTML = e.target.outerHTML;
                e.target.outerHTML = e.dataTransfer.getData('text');
            }
            return false;
        }
    </script>