HTML5拖放，交换两个div的位置

最新推荐文章于 2022-09-01 16:47:41 发布

敲代码的旺仔

最新推荐文章于 2022-09-01 16:47:41 发布

阅读量935

点赞数 1

文章标签： html js

原文链接：https://www.cnblogs.com/sunjiguang/p/5380272.html

版权

通过js和html5拖放交换两个div的位置（转载）

<!DOCTYPE HTML>  
<html>  
<head>  

<script type="text/javascript">  
function allowDrop(ev)  
{  
ev.preventDefault();  
}  
  
var srcdiv = null;  
function drag(ev,divdom)  
{  
srcdiv=divdom;  
ev.dataTransfer.setData("text/html",divdom.innerHTML);  
}  
  
function drop(ev,divdom)  
{  
ev.preventDefault();  
if(srcdiv != divdom){  
srcdiv.innerHTML = divdom.innerHTML;  
divdom.innerHTML=ev.dataTransfer.getData("text/html");  
}  
}  
</script>  
</head>  
<body>  
  
<div style="width: 50px;height:50px;"  ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">  
  div1! 
</div>  
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">  
div2!  
</div>  
<div style="width: 50px;height:50px;" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">  
div3  
</div>
  
</body>  
</html>