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