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/