vue-拖动组件

<div class="floater-wrap" v-if="show" ref="floater" @click.stop="handleClick" 
@touchstart.stop="handleTouchsrart('floater',$event)" 
@touchmove.stop="handleTouchMove('floater',$event)">
    <img src="../../assets/image/icon_xuanfu.png" alt="">
    <span class="close" @click.stop="closeFloater">
        <img src="../../assets/image/icon_close.png" alt="">
    </span>
</div>

data(){
    return{
        coordinate: {
            client: {},
            elePosition: {}
        }
    }
},
methods:{
    // 开始拖拽
    handleTouchsrart(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
    },
    // 开始拖拽
    handleTouchMove(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 <= 80 ? 80 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
        y = y <= 50 ? 50 : y >= innerHeight - this.$refs[refName].offsetHeight - 84 ? innerHeight - this.$refs[refName].offsetHeight - 84 : y
        // 移动当前元素
        // this.$refs[refName].style.left = x + 'px'
        this.$refs[refName].style.top = y + 'px'
    },
}