今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了；
搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码：
只能慢速拖动的代码：
<!DOCTYPE html> <html> <head> <title>vue结合原生js实现拖动</title> <script src="/UploadFiles/2021-04-02/vue.min.js">可以快速拖动的代码：
<!DOCTYPE html> <html> <head> <title>vue结合原生js实现拖动</title> <script src="/UploadFiles/2021-04-02/vue.min.js">补充:vue 自定义指令-拖拽
主要思想： 获取拖拽的dom元素，在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置：
var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop;再通过document.onmousemove事件计算dom元素左上角相对 视口的距离：
var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px';完整代码：
<script> /* vue-自定义指令-拖拽 */ Vue.directive('drag',function(){ var oDiv=this.el; oDiv.onmousedown=function(ev){ var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var l=ev.clientX-disX; var t=ev.clientY-disY; oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; }; }); window.onload=function(){ var vm=new Vue({ el:'#box', data:{ msg:'welcome' } }); }; </script> </head> <body> <div id="box"> <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div> <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div> </div> </body>总结
以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)”评论...