美文网首页
JS——事件详情(拖拽案例:onmousedown、onmous

JS——事件详情(拖拽案例:onmousedown、onmous

作者: VivaLaVida_692c | 来源:发表于2020-10-22 16:23 被阅读0次

    实现拖拽案例

    效果如下图所示:

    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

    相关文章

      网友评论

          本文标题:JS——事件详情(拖拽案例:onmousedown、onmous

          本文链接:https://www.haomeiwen.com/subject/docpmktx.html