h5拖动div,js拖拽div排序

简单通过js实现拖动div调整位置功能，比如页面拖拽排版、商品拖动排序、拖拽设计等。

在可拖动的div元素加入：

ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)"

比如：

<div class='content'>
    <div ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)" class="item-goods itemid{$value['id']}" >
    //拖动可进行调整的多个模块

    </div>
    <div ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)" class="item-goods itemid{$value['id']}" >
        //拖动可进行调整的多个模块

    </div>
    <div ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)" class="item-goods itemid{$value['id']}" >
        //拖动可进行调整的多个模块

    </div>
    <div ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)" class="item-goods itemid{$value['id']}" >
        //拖动可进行调整的多个模块

    </div>

  </div>

然后在js编写：

<script>
    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();
        if (srcdiv !== divdom) {
            srcdiv.innerHTML = divdom.innerHTML;
            divdom.innerHTML = temp;
        }

        //假如div里面时echarts图表
        $('div').removeAttr('_echarts_instance_')
    }
</script>