javascript如何实现随意拖动的层

2024-04-27 14:06:52

字体：大中小

来源：转载

供稿：网友

javascript如何实现随意拖动的层

Javascript如何实现随意拖动的层:

在很多应用中都有拖动层移动的效果的扩展，下面就通过实例简单介绍一下如何利用javascript实现随意拖动一个层的效果。

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/CSS">#divBlock{ width:140px; height:140px; background-color:pink; cursor:pointer;}</style><script type="text/javascript"> function divBlock_event_mousedown(e){  var e, obj;  obj=document.getElementById("divBlock");  e=window.event?window.event:e;  obj.startX=e.clientX-obj.offsetLeft;  obj.startY=e.clientY-obj.offsetTop;  document.onmousemove=document_event_mousemove;    if(document.attachEvent) {    document.attachEvent("onmouseup",document_event_mouseup) } else {    document.addEventListener("mouseup",document_event_mouseup,"") }} function document_event_mousemove(e){   var e, obj;   obj=document.getElementById("divBlock");   e=window.event?window.event:e;   with(obj.style)  {     position="absolute";     left=e.clientX-obj.startX+"px";     top=e.clientY-obj.startY+"px";   } } function document_event_mouseup(e){   document.onmousemove="";     if(document.attachEvent)  {    document.detachEvent("onmouseup",document_event_mouseup);  }  else  {     document.removeEventListener("mouseup",document_event_mouseup,"");  } } </script></head><body>  <div id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0])"></div> </body></html>

在以上代码中，当鼠标在div中按下时，可以随意拖动div的位置。下面就简单介绍一下实现过程。

实现原理:

当鼠标在div块中按下的时候，就会触发div的onmousedown事件，并且通过计算出鼠标按下时鼠标指针所在位置到div左边缘和上边缘的距离。当鼠标移动的时候就通过鼠标当前在屏幕中的坐标减去前面计算所得鼠标指针距离左边缘和上边缘的距离，就可以实时的获得当前div绝对定位的left和top属性值，这样就实现了鼠标拖动div块移动的效果。当鼠标松开的时候就会触发onmouseup事件，然后调用document_event_mouseup()函数，进而删除相应的事件处理程序。

代码注释:

1.function divBlock_event_mousedown(e){}，onmousedown事件处理程序。

1.1.var e, obj，声明两个变量，用法会在下面介绍。

1.2.obj=document.getElementById("divBlock")，获得div对象。

1.3.e=window.event?window.event:e，用来兼容IE9以下浏览器和火狐浏览器，可以参阅javascript事件对象参数兼容各浏览器写。

1.4.obj.startX=e.clientX-obj.offsetLeft，用来计算鼠标当前位置距离div左边缘的尺寸。

1.5.obj.startY=e.clientY-obj.offsetTop，用来计算鼠标当前位置距离div上边缘的尺寸。

1.6.document.onmousemove=document_event_mousemove，为document对象绑定onmousemove事件处理函数，之所以将事件处理函数绑定在document对象而不是要拖动的div之上是为了防止当鼠标指针移出div之后导致拖动效果失效的问题。

1.7.if(document.attachEvent)用以兼容IE8和IE8以下浏览器与其他主流浏览器，具体参阅javascript如何注册事件处理函数。

2. function document_event_mousemove(e){}定义onmousemove事件处理函数。

2.1.var e, obj，声明两个变量，下面会有用到。

2.2.obj=document.getElementById("divBlock")，获得div对象。