vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
今天用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实现鼠标拖动功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
赞 (0)