实现拖拽案例
效果如下图所示:
1.gif代码如下图所示:
image代码思路说明:
第23行代码:在div元素中触发onmousedown事件,实现鼠标在div按下,不提起功能 【区别于onclick,onclick:按下、提起事件,属于两个动作(即:onmousedown+onmouseup)】
第20-21行代码:声明变量,用于计算鼠标按下位置到div位置长度距离 (详细见下图解释分析)
第24-25行代码:设置鼠标按下位置到div位置长度距离(即:鼠标位置-div左边距到浏览器的长度距离) (详细见下图解释分析)
第27行代码:鼠标移动事件 当div按下触发此事件,让div整屏可移动,这就是“document.onmousemove”的作用
第28-29行代码:让div移动,即改变div的左边距/上边距到浏览器的距离长度(记得加‘px’单位) 而div左边距到浏览器的距离长度=鼠标位置-鼠标按下位置到div位置长度距离 (详细见下图解释分析)
第32行代码:鼠标提起事件
第33-34行代码:关闭移动事件并关闭不需要的提起事件以节省内存空间
第37行代码:return false用于解决ff旧版本(空值div拖拽bug)的兼容问题,而设置的阻止默认事件
详细解释距离的问题,如下图:(讲解20-21、24-25、28-29行的代码)
image以上简单拖拽案例,足以满足需求了,但是,以上所编写的代码还有一点bug,那就是:当用户把div拖拽至浏览器外并松手,div就会消失不见,怎么找都找不回。
所以,修改以上bug,实现:div只能在浏览器范围内实现拖拽现象(防止拖出页面)
修改后的代码如下图:
image效果如下图所示:
image
网友评论