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对应的缩放比就行

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容