先看效果吧
如果你有自己动手实现过，很可能会遇到移动图片后屏幕会闪一下情况，优雅的并且强迫症的你当然是不能接受的。出现闪屏是因为改变了渲染数组元素的顺序，那么解决方法就是不改变数组元素顺序。为了让你体验到闪屏，实现代码的时候我保留了一部分，添加新图时闪你：
前面已经说了解决方法，你可以尝试修复它
实现思路
- 第一个数组元素顺序固定：object类型，存src、图片x轴y轴的位置等字段，给页面渲染用
- 第二个数组存放图片，拖动后会重新设置
- 页面绑定事件longPress，处理选中图片
- 页面绑定事件touchmove、touchend，处理拖动图片
transform、translate、transition实现动画效果，后面看代码注释吧
代码
在工具预览
- 新建文件夹image-drag
- 新建Component
- 复制代码
- 在引用的页面.json添加
"usingComponents": {
"image-drag": "/components/image-drag/image-drag"
}
- 在wxml使用组件
<image-drag bind:setFilePaths="setFilePaths"></image-drag>
