拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等;挺好玩儿
,和码友们一起学习!理解有误或者有更好的建议请提出来哦
下面分享一下拖拽的原理
拖拽流程:
1)事件:onmousedown;onmousemove;onmouseup;
2)实现原理分析:
拖拽是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。
当onmousedown或onmousemove时,都可以获取到当前鼠标的位置,即移动前的坐标值与移动中的坐标值。
参考如下图:
如上图所示:
在onmousemove中元素的left值为 : 鼠标移动后的left值 - 鼠标按下的left值 + 元素的初始left值;
top值为 : 鼠标移动后的top值 - 鼠标按下的top值 + 元素的初始top值;
需要注意:onmousemove;onmouseup事件要在onmousedown事件内;
代码如下: