<template >
<div>
<div id="div" @mousedown="move">
</div>
</div>
</template>
<script>
export default {
methods:{
move(e){
//e.target 获取当前元素
let oDiv = e.target;
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
//onmousemove 鼠标浮动上去的时候
document.onmousemove = (e) =>{
let left = e.clientX - disX;
let top = e.clientY - disY;
if(left >= 0 ){
oDiv.style.left = left+'px';
}
if(top >= 0 ){
oDiv.style.top = top+'px';
}
}
//onmouseup 鼠标抬起
document.onmouseup = () =>{
document.onmousemove = null;
document.onmouseup = null;
}
}
}
};
</script>
<style >
#div{
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background: blueviolet;
}
</style>
css样式必须有,需要给默认位置absolute