想要实现vue组件的窗口拖拽事件,需要在vue 的最上层div中设置v-drag,然后添加指令directives drag:
directives:{
drag(el){
el.onmousedown = function(e){
var disx = e.clientX - el.offsetLeft;
var disy = e.clientY - el.offsetTop;
document.onmousemove = function (e){
el.style.left = e.clientX - disx+'px';
el.style.top = e.clientY - disy+'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
}
}
},
对应vue 的div标签:
<div v-drag>teststh</div>
注意这种方式需要对应的div 样式position不能是relative,不然会发生偏移。absolute和fixed亲测可行。
还有一点,对应的div样式margin不能为auto,不然margin会自动根据实际情况让出一定距离,拖拽的时候就收到影响了。