先看实现效果：
实现过程
根据查阅文档，要实现拖拽功能，大概有三种方式：
1.给需要实现拖拽的元素监听catchtouchmove事件，动态修改样式坐标
这种方式最容易想到，通过js监听触摸位置动态修改元素坐标。但是拖拽是一个实时性要求非常高的操作，你不能说在这个操作里面去设置节流函数减少setData操作，并且本身每次setData操作也是比较耗性能的，很容易造成拖拽卡顿，这个方案可以首先排除。
2.movable-area movable-view
movable-area组件的作用是定义一个区域，在这个区域内的movable-view的组件可以被用户自由的移动，同时movable-view可以轻松设置放大缩小效果。根据组件定义，可以想到它的使用场景大概是在页面局部区域内对一些元素拖拽缩放，这个与我们想要的在整个页面进行自由拖拽的需求不符。
3.wxs响应事件
wxs是专门用来解决有频繁交互的场景，它直接在视图层运行，免去了视图层跟逻辑层通信带来的性能损耗，实现流畅的动画效果。详见：wxs响应事件 。根据wxs的使用场景，基本能确定我们要的功能实现应该使用wxs方案。
代码实现
我们使用的是uniapp框架，查阅uniapp文档，官方直接提供了一个自由拖拽的代码案例，链接点击这里。
直接拿官方的代码示例改造一番，如下：
代码语言：javascript复制<template>
<view @click="play" :data-size="size" :data-landscape="isLandscape" @touchstart="hudun.touchstart" @touchmove="hudun.touchmove" class="movable">
<canvas id="lottie-canvas" type="2d" style="width: 88px; height: 102px;"></canvas>
</view>
</template>
<script module="hudun" lang="wxs">
var startX = 0
var startY = 0
var lastRight = 20
var lastBottom = 20
var windowSize = {
width: 375,
height: 619
}
var isLandscape = false
function touchstart(event, ins) {
var touch = event.touches[0] || event.changedTouches[0]
startX = touch.pageX
startY = touch.pageY
var size = ins.selectComponent('.movable').getDataset().size
isLandscape = ins.selectComponent('.movable').getDataset().landscape
windowSize.width = size.width
windowSize.height = size.height
}
function touchmove(event, ins) {
// 边界值
var edgeTop = windowSize.height, edgeBottom = 0, edgeRight = 0, edgeLeft = windowSize.width
// 拖拽元素大小
var elementWidth = 88, elementHeight = 102
// 横屏处理,api返回值可能有误，这里做兼容处理
if (isLandscape) {
edgeTop = windowSize.width < windowSize.height ? windowSize.width : windowSize.height
edgeLeft = windowSize.height < windowSize.width ? windowSize.width : windowSize.height
}
var touch = event.touches[0] || event.changedTouches[0]
var pageX = touch.pageX
var pageY = touch.pageY
var rightMove = startX - pageX lastRight
var right = rightMove
if (rightMove < edgeRight) {
right = 0
}
if (rightMove > edgeLeft - elementWidth) {
right = edgeLeft - elementWidth
}
var bottomMove = startY - pageY lastBottom
var bottom = bottomMove
if (bottomMove < edgeBottom) {
bottom = 0
}
if (bottomMove > edgeTop - elementHeight) {
bottom = edgeTop - elementHeight
}
// 按住拖动元素并同时触发ios推出时，窗口高度变化返回值有误，做兼容处理(这里是根据打印值看出的规律设置的判断条件，不保证百分比有效)
if (bottom - lastBottom > 300) {
bottom = lastBottom
right = lastRight
}
startX = pageX
startY = pageY
lastRight = right
lastBottom = bottom
ins.selectComponent('.movable').setStyle({
right: right 'px',
bottom: bottom 'px'
})
return false // 不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
}
</script>
<script>
import lottie from 'lottie-miniprogram'
let insList = {} // 存放动画实例集合
export default {
props: {
tag: String
},
data() {
return {
isPlay: true,
size: {},
isLandscape: false, // 是否横屏
}
},
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,
autoplay: true,
path: '', // lottie json网络地址
rendererSettings: {
context,
},
})
// 开始播放动画才执行定时器，否则可能会因为加载很久无法触发定时器逻辑
let flag = false
ins.addEventListener('enterFrame', () => {
if (!flag) {
flag = true
setTimeout(() => {
this.isPlay = false
ins.stop()
}, 3000)
}
})
insList[this.tag] = ins
})
},
play() {
const ins = insList[this.tag]
if (!this.isPlay) {
this.isPlay = true
ins.play()
setTimeout(() => {
this.isPlay = false
ins.stop()
}, 3000)
}
}
},
beforeDestroy() {
delete insList[this.tag]
},
mounted() {
const res = wx.getSystemInfoSync()
const { deviceOrientation, windowWidth, windowHeight } = res
this.isLandscape = deviceOrientation === 'landscape'
this.size = {
width: windowWidth,
height: windowHeight,
}
}
}
</script>
<style lang="stylus">
.movable
position fixed
right 20px
bottom 20px
width 88px
height 102px
z-index 99999
</style>上面代码是开篇效果图实现的完整代码，已经封装一个单独的组件。我们要拖拽的是一个canvas元素，用到了lottie动画库，点击时会播放动画。
如果你要实现页面拖拽的只是一个简单的按钮，那代码量会少很多。而如果你要实现的功能跟这个类似，那么针对上面代码有以下几点需要值得解释：
1.我们的需求是在多个页面需要展示，经过查阅相关资料，是没法实现在只在一个地方放置组件，然后每个页面展示，必须每个页面引入该组件。幸运的是，uniapp支持定义全局小程序组件，可以帮我们减少引入的代码量。做法如下： 在main.js中定义组件
代码语言：javascript复制// 动画组件
import { HudunAnimation } from '@/components/hudun-animation/index'
Vue.component('HudunAnimation', HudunAnimation)页面中使用：
wxml：
代码语言：javascript复制<HudunAnimation tag="index" ref="hudunRef"></HudunAnimation>// 进入页面时初始化动画
mounted() {
this.$refs.hudunRef.init()
}2.可以注意到，上面封装的组件当中，有一个tag属性，它是用来标识来自哪个页面的动画实例。它的存在是由于在组件当中，正常情况下我们可以直接在data中定义一个属性存放动画实例，但是经过踩坑发现如果直接这么写
代码语言：javascript复制this.ins = lottie.loadAnimation({})控制台会报一个错误，是因为lottie.loadAnimation({})返回的对象放置于data中会经过一个JSON.stringfy的过程，在这个过程中不知道什么原因报错了。为了解决此报错，改为在组件全局定义一个insList存放动画实例集合，通过传入的tag拿到对应的页面实例，然后调用对应的实例play方法。
页面点击穿透问题
注意wxs中touchmove方法最后返回false，代表不往上冒泡，相当于同时调用了stopPropagation和preventDefault，这个不能省略
限定屏幕内拖拽
要限定在屏幕内滑动，我们必须要知道屏幕的大小。这里要提到的是，wxs中不允许直接调用微信的api（wx.开头），这就涉及到页面或组件js与wxs代码通信传值的问题。这里直接给出实现逻辑： 将要传递的值，例如屏幕大小，在组件或页面当中调用getSystemInfoSync拿到值放在data中，然后在wxml中通过 data-开头绑定值传入 wxs中，通过
var size = ins.selectComponent('.movable').getDataset().size取到值，详细代码实现见上文。上文代码实现同时处理了横屏的情况，在横屏时调用getSystemInfoSync返回值可能依旧是竖屏的情况，上面代码实现做了兼容处理。
查看体验效果
微信搜索小程序：说客英语--你的私人外教
