Vue移动端实现元素拖拽移动

Vue移动端实现元素拖拽移动

<template>
    <div ref="dragBox" 
         @touchstart="touchstartHandle('dragBox',$event)"   
         @touchmove="touchmoveHandle('dragBox',$event)">
         可拖拽元素
    </div>
</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