标签：
js实现的div拖动效果实例代码:
div的拖动效果在很多效果中都有应用，当然还有很多附加的功能，本章节只是给拖动效果，并介绍一下它的实现过程。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>div拖动效果-蚂蚁部落</title> <style type="text/css"> #oDiv { position:absolute; width:100px; height:60px; border:1px solid silver; left:100px; top:100px; z-index:9999; } #move { cursor:move; width:100%; height:15px; background-color:#0066cc; font-size:10px; } #close { float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:White; font-size:15px; } </style> <script type=‘text/javascript‘> var offset_x; var offset_y; function Milan_StartMove(oEvent,div_id) { var whichButton; if(document.all&&oEvent.button==1) { whichButton=true; } else { if(oEvent.button==0) whichButton=true; } if(whichButton) { offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); document.documentElement.onmousemove=function(mEvent) { var eEvent=mEvent||event; var oDiv=div_id; var x=eEvent.clientX-offset_x; var y=eEvent.clientY-offset_y; oDiv.style.left=(x)+"px"; oDiv.style.top=(y)+"px"; } } } function Milan_StopMove(oEvent) { document.documentElement.onmousemove=null; } function div_Close(o) {o.style.display="none";} window.onload=function() { var omove=document.getElementById("move"); var oclose=document.getElementById("close"); omove.onmousedown=function(){Milan_StartMove(event,this.parentNode)} omove.onmouseup=function(){Milan_StopMove(event)} oclose.onclick=function(){div_Close(this.parentNode.parentNode)} } </script> </head> <body> <div id="oDiv"> <div id="move"> <div id="close">X</div> </div> </div> </body> </html>
以上代码实现了div的拖动效果，下面简单介绍一下此效果的实现过程:
一.实现原理:
实现的原理非常的简单，就是将被拖动的div设置为绝对定位，然后根据鼠标指针的坐标不断设定div的left和top属性值即可，当然在此过程中需要用到一些事件或者具体坐标的计算，这里就不介绍了，可以参阅代码注释。
二.代码注释:
1.var offset_x,声明一个变量用来存储鼠标指针距离div左边缘的距离。
2.var offset_y,声明一个变量用来存储鼠标指针距离div上边缘的距离。
3.function Milan_StartMove(oEvent,div_id){}，此函数为move元素的onclick事件处理函数，第一个参数是事件对象，第二个是move元素的父元素。
4.var whichButton，声明一个变量，用来存储一个布尔值。
5.if(document.all&&oEvent.button==1){}，如果在IE8和IE一下浏览器中，且event的button属性值为1，if(document.all)可用来是否是IE8和IE8以下浏览器，如果button属性值等于1，那么就是点击的鼠标左键。
6.whichButton=true，将变量的值设置为true。
7.if(oEvent.button==0)，在其他浏览器中，如果button属性值为0。
8.if(whichButton){}，如果whichButton为true，也就是鼠标左键被按下。
9.offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft)，获取鼠标指针坐标距离oDiv元素左边缘的距离。
10.offset_y=parseInt(oEvent.clientY-oDiv.offsetTop)，获取鼠标指针坐标距离oDiv元素上边缘的距离。
11.document.documentElement.onmousemove=function(mEvent){}，为document对象注册onmousemove事件处理函数，之所以注册到document对象上，是利用了事件冒泡原理，否则有可能鼠标指针滑出div，导致拖动失效的现象。
12. var eEvent=mEvent||event，事件对象的兼容性写法。
13.var oDiv=div_id，将对象的引用赋值给oDiv变量。
14.var x=eEvent.clientX-offset_x，获取被拖动div的左边缘距离窗口的距离。
15.var y=eEvent.clientY-offset_y，获取被拖动div的上边缘距离窗口的距离。
16.oDiv.style.left=(x)+"px"，设置left属性值。
17.oDiv.style.top=(y)+"px",设置top属性值。
18.function Milan_StopMove(oEvent){document.documentElement.onmousemove=null;} ，松开鼠标左键时的事件处理函数。
19.function div_Close(o){o.style.display="none";} ，点击叉号时的事件处理函数。
三.相关阅读:
1.Event.button属性可以参阅javascript的button事件属性一章节。
2.document.all可以参阅document.all用法详解一章节。
3.parseInt()函数可以参阅javascript的parseInt()函数一章节。
4.clientX和clientY属性可以参阅javascript的clientX事件属性一章节。
5.offsetLeft和offsetTop属性可以参阅offsetLeft、clientLeft和scrollLeft等属性的用法一章节。
6.onmousemove事件可以参阅javascript的onmousemove事件一章节。
7.var eEvent=mEvent||event可以参阅var ev=window.event||ev的作用是什么一章节。
8.onmousedown事件参阅javascript的onmousedown事件一章节。
9.onmouseup事件可以参阅javascript的onmouseup事件一章节。
10.onclick事件可以参阅javascript的onclick事件一章节。
11.parentNode属性可以参阅javascript如何元素当前节点的父节点一章节。
12.事件冒泡可以参阅javascript事件冒泡简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9704
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5128999.html
