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

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

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

只能慢速拖动的代码：

vue结合原生js实现拖动

{{ site.name }}

{{ index }} : {{ site.name }}

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;

}

}

})

.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;

}

可以快速拖动的代码：

vue结合原生js实现拖动

{{ site.name }}

{{ index }} : {{ site.name }}

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.οnmοusemοve=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.οnmοusemοve=null;

}

}

})

.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;

}

补充: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';

完整代码：

/* vue-自定义指令-拖拽 */

Vue.directive('drag',function(){

var oDiv=this.el;

oDiv.οnmοusedοwn=function(ev){

var disX=ev.clientX-oDiv.offsetLeft;

var disY=ev.clientY-oDiv.offsetTop;

document.οnmοusemοve=function(ev){

var l=ev.clientX-disX;

var t=ev.clientY-disY;

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

};

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

};

};

});

window.οnlοad=function(){

var vm=new Vue({

el:'#box',

data:{

msg:'welcome'

}

});

};

总结

以上所述是小编给大家介绍的vue+mousemove实现鼠标拖动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！