今天用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> <div> <div v-for="(site, index) in list1"> <div @mousedown="mousedown(site, $event)" @mousemove.prevent='mousemove(site, $event)' @mouseup='mouseup(site, $event)'> {{ site.name }} </div> </div> </div> <div> <div v-for="(site, index) in list2"> <div> {{ 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> <div> <!-- draggable=true --> <div v-for="(site, index) in list1"> <!-- @mousemove.prevent='mousemove(site, $event)' --> <div @mousedown="mousedown(site, $event)" @mouseup='mouseup(site, $event)'> {{ site.name }} </div> </div> </div> <div> <div v-for="(site, index) in list2"> <div> {{ 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';
完整代码：