vue 实现拖拽案例 uniapp

直接复制运行，简单易懂。

<template>
    <view class="content">
        <image class="logo" @touchstart='WraptouchStart' @touchmove='WraptouchMove'
            :style="{transform:`translate(${imginfo.x}px,${imginfo.y}px) scale(1)`}" src="/static/logo.png"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                zoom: 0.5,
                imginfo: {
                    lx: 0,
                    ly: 0,
                    x: 0,
                    y: 0
                }
            }
        },
        onLoad() {

        },
        methods: {
            WraptouchStart(e) {
                this.imginfo.lx = e.touches[0].clientX;
                this.imginfo.ly = e.touches[0].clientY;
            },
            WraptouchMove(e) {
                this.imginfo.x += (e.touches[0].clientX - this.imginfo.lx) / this.zoom
                this.imginfo.y += (e.touches[0].clientY - this.imginfo.ly) / this.zoom
                this.imginfo.lx = e.touches[0].clientX;
                this.imginfo.ly = e.touches[0].clientY;
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        zoom: 0.5;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
</style>

ps：如果父级元素有用到缩放 /zoom对应的缩放比就行