在vue中使用js实现拖拽div

<div @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" id="test" style="position:absolute;border:1px solid red;width:800px;height:600px" >

<div>你是人间的四月天 林伟因</div>
</div>
//由于是在vue中创建的项目,所以变量是在data函数中定义的
data(){
return{
   clientX:0,
clientY:0,
offsetLeft:0,
offsetTop:0,
isDown:false,
    
}
}
methods:{

mousedown(e){
console.log(e )
this.clientX = e.clientX;
this.clientY = e.clientY;
this.offsetLeft = e.target.offsetLeft;
this.offsetTop = e.target.offsetTop;
this.isDown = true;

},
mousemove(e){
console.log(‘wawawa‘)
if(this.isDown){
const x = e.clientX;
const y = e.clientY;
let nx = x-(this.clientX-this.offsetLeft)
let ny = y-(this.clientY-this.offsetTop)
document.getElementById(‘test‘).style.left = nx + ‘px‘;
document.getElementById(‘test‘).style.top = ny + ‘px‘;
} else{
return;
}

},
mouseup(e){
console.log(‘hahah ‘)
this.$nextTick(()=>{
this.isDown = false;
})

},
}

 

 

在vue中使用js实现拖拽div

上一篇:Metasploit的基本使用


下一篇:揭秘:如何为 Kubernetes 实现原地升级