HTML实现鼠标拖动元素排序

1. 简介

拖放（Drag和 drop）是 HTML5 标准的组成部分，为了使元素可拖动，必须把 draggable 属性设置为 true，
整个拖拽事件触发的顺序如下：

dragstart-> drag -> dragenter -> dragover -> dragleave -> drop
->dragend

拖放事件事件详情
一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内。这里，我暂时把被拖放的元素称为源对象，被经过的元素称为过程对象，到达的元素称为目标对象。不同的对象产生不同的拖放事件。

源对象事件：

dragstart：源对象开始拖放，开始移动时事件触发
drag：源对象拖放过程中，移动被拖拽对象时触发
dragend：源对象拖放结束，整个拖放操作结束时触发。

过程对象事件：

dragenter：源对象进入过程对象范围内，被拖拽对象进入过程对象时被触发
dragover：源对象在过程对象范围内移动，被拖拽对象在过程对象内移动时触发
dragleave：源对象离开过程对象的范围，被拖拽对象离开目标对象时触发

目标对象事件：

drop：源对象拖放到目标对象中，目标对象完全接受被拖拽对象时触发，可理解为在目标对象内松手时触发。

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

如果drop接收盒子要想接收到元素，那么接收的拖动元素 dragenter和dragover必须阻止默认行为。

2. HTML部分

添加属性如下：

draggable=“true”
οndrοp=“drop(event,this)”
οndragοver=“allowDrop(event)”
οndragstart=“drag(event, this)”

例如：

<div ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"></div>

3. JS部分

直接coby即可：

var srcdiv = null;
var temp = null;
//当拖动时触发
function drag(ev, divdom) {
    
    
    srcdiv = divdom;
    temp = divdom.innerHTML;
}

function allowDrop(ev) {
    
    
    ev.preventDefault();
}

//当放下后触发
function drop(ev, divdom) {
    
    
    ev.preventDefault();
}

//当放下后触发
    function drop(ev, divdom) {
    
    
        ev.preventDefault();
        if (srcdiv !== divdom) {
    
    
            var childNodes = srcdiv.parentNode.childNodes;
            //遍历childNodes，根据nodeName过滤掉text
            for(let i = childNodes.length-1; i >=0; i--) {
    
    
                if(childNodes[i].nodeName=='#text'){
    
    
                    childNodes[i].remove();
                }
            }
            var srcDivIndex = Array.prototype.indexOf.call(childNodes,srcdiv);
            var divDomIndex = Array.prototype.indexOf.call(childNodes,divdom);
            if(srcDivIndex>divDomIndex){
    
    
                $(srcdiv).after(divdom);
            }else if(srcDivIndex<divDomIndex){
    
    
            $(srcdiv).before(divdom);
        }
    }
}