H5 实现div拖放位置互换

1 给要进行拖拽的div加上draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)"三个属性

<!-- 图表容器 -->
    <div id="echarts_container">
        <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
            <div id="chart1"></div>
        </div>
        <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
            <div id="chart2"></div>
        </div>
        <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
            <div id="chart3"></div>
        </div>
        <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
            <div id="chart4"></div>
        </div>
        <div draggable="true" ondrop="drop(event,this)" ondragstart="drag(event, this)" ondragover="allowDrop(event)">
            <div id="chart5"></div>
        </div>
    </div>

2.放下div时，交换两个div的内容innerHTML

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_')
}