拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友!
一、拖拽的流程动作
①鼠标按下
②鼠标移动
③鼠标松开
拖拽原理
1.鼠标按下+鼠标移动 = 拖拽 事件 onmousedown + onmousemove
2.鼠标松开 = 无拖拽 停止拖拽 onmouseup
3.鼠标偏移 = 拖拽距离
二、拖拽流程中对应的JS事件
①鼠标按下会触发onmousedown事件
②鼠标移动会触发onmousemove事件
③鼠标松开会触发onmouseup事件
三、实现的原理讲解
拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。
当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。
那么上面①与②的代码就应该变成这样
移动前与移动后坐标有了,那么计算偏移,先看下图
很明显移动后元素的X坐标为 鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标
Y坐标为 鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标
把新的 X,Y 替换元素的 X,Y 就搞定了。
那么代码就应该更换为:
需要注意的事,如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。
注意:(1)被拖拽的元素的样式要设置成绝对或相对位置才有效果。
(2)拖拽加到document,不然内容会脱离