<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; }) }, }