<img
ref="imgDiv"
class="img"
src="./image/erweima.png"
@mousedown="move" //事件
/>
方法
// 拖动图片
move(e) {
const that = this
e.preventDefault()
// 获取元素
var left = document.querySelector('.left')
var img = document.querySelector('.img')
var x = e.pageX - img.offsetLeft
var y = e.pageY - img.offsetTop
// 添加鼠标移动事件
left.addEventListener('mousemove', move)
function move(e) {
img.style.left = e.pageX - x + 'px'
img.style.top = e.pageY - y + 'px'
that.form.qrXAxis = e.pageX - x
that.form.qrYAxis = e.pageY - y
}
// 添加鼠标抬起事件,鼠标抬起,将事件移除
img.addEventListener('mouseup', function () {
left.removeEventListener('mousemove', move)
})
// 鼠标离开父级元素,把事件移除
left.addEventListener('mouseout', function () {
left.removeEventListener('mousemove', move)
})
},