今天用vue+原生js的mousemove事件，寫了個(gè)拖動(dòng)，發(fā)現(xiàn)只能慢慢拖動(dòng)才行，鼠標(biāo)只要移動(dòng)快了，就失效，不能拖動(dòng)了；
搞了半天在，總算解決了，但是問(wèn)題的深層原理還沒(méi)搞清楚，知道的大俠可以留言分享，下面直接上代碼：
只能慢速拖動(dòng)的代碼：
<!DOCTYPE html><html><head> <title>vue結(jié)合原生js實(shí)現(xiàn)拖動(dòng)</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:'拖動(dòng)我', 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>可以快速拖動(dòng)的代碼：
<!DOCTYPE html><html><head> <title>vue結(jié)合原生js實(shí)現(xiàn)拖動(dòng)</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:'拖動(dòng)我', 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>
新聞熱點(diǎn)
疑難解答
圖片精選
