因项目需求写了一个拖拽功能,不足之处望大家指正!
<div @touchmove="move" mousemove="move" @touchstart="down" @mousedown="down"></div>
data() {
positionX: 0,
positionY: 0,
nx: '',
ny: '',
dx: '',
dy: '',
x: '',
y: ''
},
methods: {
down (e) {
let oDiv = e.target
this.flag = true
var touch
if (e.touches) {
touch = e.touches[0]
} else {
touch = e
}
this.positionX = touch.clientX
this.positionY = touch.clientY
this.dx = oDiv.offsetLeft
this.dy = oDiv.offsetTop
this.$emit('down', e)
},
move (e) {
if (this.flag) {
let oDiv = e.target
var touch
if (e.touches) {
touch = e.touches[0]
} else {
touch = e
}
this.nx = touch.clientX - this.positionX
this.ny = touch.clientY - this.positionY
this.x = this.dx + this.nx
this.y = this.dy + this.ny
oDiv.style.left = this.x + 'px'
oDiv.style.top = this.y + 'px'
}
},
}
网友评论