vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
发布时间：2020-12-17 02:13:01 所属栏目：百科 来源：网络整理
导读：今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了； 搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码： 只能慢速拖动的代码： vue结合原生js实现
|
今天用vue+原生js的mousemove事件，写了个拖动，发现只能慢慢拖动才行，鼠标只要移动快了，就失效，不能拖动了； 搞了半天在，总算解决了，但是问题的深层原理还没搞清楚，知道的大侠可以留言分享，下面直接上代码： 只能慢速拖动的代码： 可以快速拖动的代码： 补充: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'
}
});
};
总结以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |