本文简单介绍了怎样实用js代码实现在网页中随意拖动div标签效果。
代码如下：
CSS部分:
<style type="text/css">
#divBox1, #divBox2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
js部分：
为了是代码更加的简洁，首先引用jquery插件
<script src="jquery.js"></script>
<script type="text/javascript">
function tuodong(ev){
ev.preventDefault();
}
var srcdiv = null;
function div_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>
html部分：
<div id="divBox1" οndrοp="drop(event,this)" draggable="true" οndragstart="div_drag(event, this)" οndragοver="tuodong(event)">
<p>div方框1!</p>
</div>
<div id="divBox2" οndrοp="drop(event,this)" draggable="true" οndragstart="div_drag(event, this)" οndragοver="tuodong(event)">
<p>div元素2!</p>
</div>
然后将整理好的代码，用记事本或dw保存为html格式，然后在浏览器打开就可可以快速查看div元素的拖动叠加效果。
原理也比较简单主要用到了js中的ondrop、ondragover、draggable、ondragstart属性.
draggable:允许元素被拖动
ondrop: 拖动到指定坐标后放下需要执行的处理，在这里我们自定义了drop(event,this)函数,互换两个的元素
ondragover:当拖动链接等有默认事件的元素时，要在ondragover事件中用ev.preventDefault()阻止默认事件。否则drop事件不会触发。
ondragstart:选取拖动目标要做的处理，这里保存拖动目标的innerHTML.
以上就是js代码简单实现div元素之间的拖动效果.