微客导航 » 文章资讯 » vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

2023-09-08 16:40:04 300

今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；

搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：

只能慢速拖动的代码：




vue结合原生js实现拖动







{{site.name}}

{{index}}:{{site.name}}

可以快速拖动的代码：




vue结合原生js实现拖动









{{site.name}}






{{index}}:{{site.name}}

补充:vue自定义指令-拖拽

主要思想：获取拖拽的dom元素，在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置：

vardisX=ev.clientX-oDiv.offsetLeft;
vardisY=ev.clientY-oDiv.offsetTop;

再通过document.onmousemove事件计算dom元素左上角相对视口的距离：

varl=ev.clientX-disX;
vart=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';

完整代码：

总结

以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)

热门推荐

随机推荐