因項(xiàng)目需求寫了一個(gè)拖拽功能,不足之處望大家指正笆凌!
<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'
? ? ? ? }
? ? ? },
}