鼠标拖拽div元素

鼠标拖拽div元素_第1张图片

上图中绿色箭头指向的分别是3个事件,大概的意思是:鼠标单击div#box元素后,激活了document.onmousemove鼠标移动事件,在移动鼠标时,会改变div#box的left、top值,从而达到div#box元素随着鼠标移动。单鼠标放开时触发了document.onmouseup鼠标松开事件,在鼠标松开事件里把document.onmousemove事件设为null,这时div#box就不会随鼠标移动了。

在上图中还有一项重要的事情,就是坐标的计算,他关系到div#box元素移动的是不是流畅、是不是准确。图上的标出的8个变量是主要要计算的变量:pX、pY、oL、oT、pX1、pY1、l、t,它们代表的意思如下图所示。

下图中div#box从1号位置移动到了2号位置,黄色小圆点是是鼠标单击的位置。然后需要介绍一下ev.clientX/ev.clientY与ev.pageX/ev.pageY的区别:

。。。。。。。。。。。。。。

。。。。。。。。。。。。。。

更多详情、源代码下载请点击这里


许你一城个人博客


你可能感兴趣的:(JavaScript,css,html)