纯js实现div的拖拽功能

为了实现纯js编写的div拖拽的功能,在网上找了一些资料但是还是感觉没有说到点子上去

个人觉得div的拖拽需要三个主要的事件

1.onmousedown鼠标按下事件

2.onmousemove鼠标移动事件

3.onmouseup鼠标按键抬起事件

 

但是里面有一个问题就是onmousemove是什么时候起作用呢,所以这个需要特意标示出来

 

页面html代码和css如下

移动Div

move

 

对应的函数在下面定义

 

moveInit一看代码就知道在鼠标按下的时候起作用

在该函数里面改变了_IsMousedown的值,其实_IsMousedown 就是之前提到的特殊标示

改变_IsMousedown 的目的就是表示出onmousemove在这一刻启用

每次我们都会判断 _IsMousedown 的值

所以在我们停止走onmousemove里面的内容时,我们只需要改变_IsMousedown 的值,使之赋值为0即可

以上说的是事件如何处理,

其实还有一个重点就是div的坐标的问题,当我们在鼠标移动的时候需要时时的去改变div的坐标,在改变坐标的时候有一个东西需要注意的就是鼠标相对于被拖拽元素的位置,这也是为什么我们在 onmousedown事件函数里面写evt.pageX - parseInt(obj.style.left);/ _ClickTop = evt.pageY - parseInt(obj.style.top);的原因

你可能感兴趣的:(纯js实现div的拖拽功能)