vue移动端拖拽移动元素

1 <template>
2     <div ref="dragBox"
3          @touchstart="touchstartHandle('dragBox',$event)"
4          @touchmove="touchmoveHandle('dragBox',$event)">
5         可拖拽元素
6     </div>
7 </template>

   data() {
        return {
            coordinate: {
                client: {},
                elePosition: {}
            }
        }
    },
    methods: {
        touchstartHandle(refName, e) {
            let element = e.targetTouches[0]
            // 记录点击的坐标
            this.coordinate.client = {
                x: element.clientX,
                y: element.clientY
            }
            // 记录需要移动的元素坐标
            this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
            this.coordinate.elePosition.top = this.$refs[refName].offsetTop
        },
        touchmoveHandle(refName, e) {
            let element = e.targetTouches[0]
            // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
            let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
            let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
            // 限制可移动距离，不超出可视区域
            x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
            y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
            // 移动当前元素
            this.$refs[refName].style.left = x + 'px'
            this.$refs[refName].style.top = y + 'px'
        }
    },

 

来源：https://www.cnblogs.com/maxiansheng/p/12454077.html