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

前端之家收集整理的这篇文章主要介绍了vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

只能慢速拖动的代码

vue结合原生js实现拖动

可以快速拖动的代码

vue结合原生js实现拖动

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

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

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

完整代码

/* 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' } }); };
Box">

总结

以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章