uniapp怎么实现小程序页面的自由拖拽功能

uniapp怎么实现小程序页面的自由拖拽功能？下面本篇文章给大家介绍一下uniapp实现小程序页面自由拖拽组件的方法，希望对大家有所帮助！

先看实现效果：

实现过程

根据查阅文档，要实现拖拽功能，大概有三种方式：

1.给需要实现拖拽的元素监听catchtouchmove事件，动态修改样式坐标

这种方式最容易想到，通过js监听触摸位置动态修改元素坐标。但是拖拽是一个实时性要求非常高的操作，你不能说在这个操作里面去设置节流函数减少setData操作，并且本身每次setData操作也是比较耗性能的，很容易造成拖拽卡顿，这个方案可以首先排除。

2.movable-area + movable-view

movable-area组件的作用是定义一个区域，在这个区域内的movable-view的组件可以被用户自由的移动，同时movable-view可以轻松设置放大缩小效果。根据组件定义，可以想到它的使用场景大概是在页面局部区域内对一些元素拖拽缩放，这个与我们想要的在整个页面进行自由拖拽的需求不符。

3.wxs响应事件

wxs是专门用来解决有频繁交互的场景，它直接在视图层运行，免去了视图层跟逻辑层通信带来的性能损耗，实现流畅的动画效果。详见：wxs响应事件 。根据wxs的使用场景，基本能确定我们要的功能实现应该使用wxs方案。

代码实现

我们使用的是uniapp框架，查阅uniapp文档，官方直接提供了一个自由拖拽的代码案例，链接点击这里。

直接拿官方的代码示例改造一番，如下：

<template>    <view catchtouchmove="return">        <view @click="play" @touchstart="hudun.touchstart" @touchmove="hudun.touchmove" @touchend="hudun.touchend">            <canvas id="lottie-canvas" type="2d" style="width: 88px; height: 102px;"></canvas>        </view>    </view></template> <script module="hudun">    var startX = 0    var startY = 0    var lastLeft = 20    var lastTop = 20     function touchstart(event, ins) {        ins.addClass('expand')        var touch = event.touches[0] || event.changedTouches[0]        startX = touch.pageX        startY = touch.pageY    }         function touchmove(event, ins) {        var touch = event.touches[0] || event.changedTouches[0]        var pageX = touch.pageX        var pageY = touch.pageY        var left = pageX - startX + lastLeft        var top = pageY - startY + lastTop        startX = pageX        startY = pageY        lastLeft = left        lastTop = top        ins.selectComponent('.movable').setStyle({            right: -left + 'px',            bottom: -top + 'px'        })    }         function touchend(event, ins) {        ins.removeClass('expand')    }         module.exports = {        touchstart: touchstart,        touchmove: touchmove,        touchend: touchend    }</script> <script>    import lottie from 'lottie-miniprogram'    let insList = {} // 存放动画实例集合    export default {        props: {            tag: String        },        data() {            return {                isPlay: true,            }        },        methods: {            init() {                const query = uni.createSelectorQuery().in(this)                query.select('#lottie-canvas').fields({ node: true, size: true }).exec((res) => {                    const canvas = res[0].node                    const context = canvas.getContext('2d')                    const dpr = uni.getSystemInfoSync().pixelRatio                    canvas.width = res[0].width * dpr                    canvas.height = res[0].height * dpr                    context.scale(dpr, dpr)                    lottie.setup(canvas)                    const ins = lottie.loadAnimation({                        loop: true,                        autopla