div的拖拽交换位置

<div id="show1"  ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">元素1</div>

<div id="show2"  ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">元素2</div>

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

var srcdiv = null; 
function drag(ev,divdom) {  //被拖拽物体 
  divdom.style.opacity='0.4';//拖动时设为透明   
  srcdiv=divdom;   
  ev.dataTransfer.setData("text/html",divdom.innerHTML);
 }

function drop(ev,divdom)
{
    ev.preventDefault();
srcdiv.style.opacity='1';//拖到既定位置时交换的改为原值
    if(srcdiv != divdom){
      divdom.style.opacity='0.4';  //交换后的首先设为透明，因为速度太快，主要区别

      setTimeout(function () {
      divdom.style.opacity='1';  //0.2秒后换为原来的值
      }, 200);

srcdiv.innerHTML = divdom.innerHTML;
      divdom.innerHTML=ev.dataTransfer.getData("text/html");
    }
}

转载于:https://www.cnblogs.com/paomoshi/p/5254686.html