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

2019-11-19 13:09:49

字体：大中小

来源：转载

供稿：网友

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

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

只能慢速拖动的代码：

<!DOCTYPE html><html><head> <title>vue结合原生js实现拖动</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script></head><body><div id="app"><div class="ctn ctn1"> <div class="sub sub1" v-for="(site, index) in list1">   <div class="dragCtn fixed" @mousedown="mousedown(site, $event)" @mousemove.prevent='mousemove(site, $event)' @mouseup='mouseup(site, $event)'>   {{ site.name }}   </div> </div></div><div class="ctn ctn2"> <div class="sub sub2" v-for="(site, index) in list2">   <div class="dragCtn">    {{ index }} : {{ site.name }}   </div> </div> </div> </div><script>new Vue({ el: '#app', data: { list1: [{name:'拖动我', index:0}], list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}], vm:'', sb_bkx: 0, sb_bky: 0, is_moving: false }, methods: {  mousedown: function (site, event) {  var startx=event.x;  var starty=event.y;  this.sb_bkx=startx - event.target.offsetLeft;  this.sb_bky=starty - event.target.offsetTop;  this.is_moving = true;  },  mousemove: function (site, event) {   var endx=event.x - this.sb_bkx;  var endy=event.y - this.sb_bky;  var _this = this  if(this.is_moving){   event.target.style.left=endx+'px';   event.target.style.top=endy+'px';  }  },  mouseup: function (e) {  this.is_moving = false;  } }})</script><style> .ctn{  line-height: 50px;  cursor: pointer;  font-size: 20px;  text-align: center;  float: left; } .sub:hover{  background: #e6dcdc;  color: white;  width: 100px; }  .ctn1{   border: 1px solid green;   width: 100px;  }  .ctn2{   border: 1px solid black;   width: 100px;   margin-left: 50px;  }  .fixed{   width: 100px;   height: 100px;  position: fixed;  background: red;  left: 10px;  top: 10px;  cursor: move;  }</style></body></html>

可以快速拖动的代码：

<!DOCTYPE html><html><head> <title>vue结合原生js实现拖动</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script></head><body><div id="app"><div class="ctn ctn1"><!-- draggable=true --> <div class="sub sub1" v-for="(site, index) in list1"> <!-- @mousemove.prevent='mousemove(site, $event)' -->   <div class="dragCtn fixed" @mousedown="mousedown(site, $event)" @mouseup='mouseup(site, $event)'>    {{ site.name }}   </div> </div></div><div class="ctn ctn2"> <div class="sub sub2" v-for="(site, index) in list2">   <div class="dragCtn">    {{ index }} : {{ site.name }}   </div> </div> </div> </div><script>new Vue({ el: '#app', data: { list1: [{name:'拖动我', index:0}], list2: [{name:'a', index:0}, {name:'b', index:1}, {name:'c', index: 2}, {name:'d', index: 3}], vm:'', sb_bkx: 0, sb_bky: 0, }, methods: {  mousedown: function (site, event) {  var event=event||window.event;  var _target = event.target  var startx=event.clientX;  var starty=event.clientY;  var sb_bkx=startx-event.target.offsetLeft;  var sb_bky=starty-event.target.offsetTop;  var ww=document.documentElement.clientWidth;  var wh = window.innerHeight;  if (event.preventDefault) {   event.preventDefault();  } else{   event.returnValue=false;  };  document.onmousemove=function (ev) {   var event=ev||window.event;   var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;   if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {    return false;   };   var endx=event.clientX-sb_bkx;   var endy=event.clientY-sb_bky;   _target.style.left=endx+'px';   _target.style.top=endy+'px';  }  },  mouseup: function (e) {  document.onmousemove=null;  } }})</script><style> .ctn{  line-height: 50px;  cursor: pointer;  font-size: 20px;  text-align: center;  float: left; } .sub:hover{  background: #e6dcdc;  color: white;  width: 100px; }  .ctn1{   border: 1px solid green;   width: 100px;  }  .ctn2{   border: 1px solid black;   width: 100px;   margin-left: 50px;  }  .fixed{  width: 100px;   height: 100px;  position: fixed;  background: red;  left: 10px;  top: 15px;  cursor: move;  }</style></body></html>

补充: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实现鼠标拖动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：vue.js项目 el-input 组件监听回车键实现搜索功能示例

下一篇：对vue2.0中.vue文件页面跳转之.$router.push的用法详解