vue+mousemove實現拖動，鼠標移動過快拖動就失效
阿新 • • 發佈：2018-08-24
拖動 win text cli prev point element lis 問題
今天用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> newVue({ 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+ 原生js拖動這塊還要繼續研究，待續...
vue+mousemove實現拖動，鼠標移動過快拖動就失效