原生JS快速拖动元素失效问题

Hydrogen 发布于2019-08-22 18:07 / 2846人阅读

摘要：快速拖动元素失效问题原因及解决方法情景再现晚上在写毕设时，碰到个快速拖动元素，元素会跟不上的问题。延迟之后，元素移动的速度赶不上鼠标移动的速度，可能造成鼠标移出元素的状态，从而触发了事件，从而造成了被拖动元素停止移动。

快速拖动元素失效问题原因及解决方法 情景再现

晚上在写毕设时，碰到个快速拖动元素，元素会跟不上的问题。具体情形如下：

代码及演示结果

出现的问题

绑定在 document 或 body 上

绑定在 div 自己身上

解决方案

首先，自己的思路是 div 之前已经绑定 mousedown 事件，再绑定 mousemove 事件，绑定事件过多从而出现快速移动失效问题。但这思路自己都感觉是错的，于是网上搜索相关问题，从一篇文章中找到了其中的原因，原因如下：

鼠标滑动地太快，自然会造成 mousemove 事件多次发生，相应的，事件处理函数也多次被调用，自然造成延迟。延迟之后，元素移动的速度赶不上鼠标移动的速度，可能造成鼠标移出元素的状态，从而触发了 mouseout 事件，从而造成了被拖动元素停止移动。 ——原文来自 鸢飞鱼跃

绑定到body 与 document 之间的细微差别

上面讲到，绑定 mousemove 事件到 body 或 document 上，都能拖动地很流畅，但是它们之间还是有些细微差别的，如下图所示：

绑定到 document 上

绑定到 body 上

在 Chrome 测试结果中可以看到，绑定到 document 上时，鼠标移动到菜单栏上，元素依旧能被拖动，而绑定在 body 上却做不到这一点。

代码

最后，以下是本次测试中用到的代码，感兴趣的小伙伴可以贴下来自己跑一跑




    
    



    Drag Me

云服务器 GPU云服务器原生JS拖动原生js查找元素原生js获取元素原生js添加元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95521.html

原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

objc94 2019-08-02 15:22 评论0 收藏0
原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

arashicage 2019-08-30 11:14 评论0 收藏0
原生JS快速实现拖放（drag and drop）效果

摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

jzzlee 2019-08-23 18:15 评论0 收藏0
JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

evin2016 2019-08-02 15:24 评论0 收藏0
JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

phoenixsky 2019-08-23 18:22 评论0 收藏0