<------------------------html--------------------------->
<--<div class="rightecharts" id="chartPeople" @mousedown="move">-->
<--------------------------js------------------------------>
data() {
return {
positionX: 0,
positionY: 0,
}
},
methods: {
move(e) {
console.log('1111')
let odiv = e.target //获取目标元素
console.log(odiv)
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft
let disY = e.clientY - odiv.offsetTop
document.onmousemove = (e) => {
//鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX
let top = e.clientY - disY
//绑定元素位置到positionX和positionY上面
this.positionX = top
this.positionY = left
//移动当前元素
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
}
},
#chartPeople { position: relative; /*定位*/ top: 10px; left: 10px; width: 200px; height: 200px; z-index: 1000; // background: #666; /*设置一下背景*/ }