在组件中定义drag指令
directives:{
drag(el){
el.onmousedown=function(e){
let x = e.pageX - el.offsetLeft
let y = e.pageY - el.offsetTop
document.onmousedown=function(e){
el.style.left = e.pageX - x + 'px'
el.style.top = e.pageY - y + 'px'
}
//鼠标抬起事件
document.onmouseup=function(){
document.onmousemove = document.onmouseup = null
}
}
}
}
需要拖拽的容器标签中添加v-drag
需要注意：需要给div设置固定定位：position：absolute
<div class="drag" v-drag>拖拽</div>