微信小程序拖拽排序列表

拖拽排序列表

思路

界面分为两层：

• 底层，正常列表展示，拖拽的时候不做处理（大牛直接加了动画，原谅我技艺不精，还没实现）
• 顶层，movable-view组件，不长按不展示，之后长按才展示，且没有点击事件。

事件

主要监听：longpress , touchmove , touchend 三个事件

longpress

保障长按才有效，并设定许多其他值。

touchmove

滑动的时候触发

1. 判断是否需要滑动页面，因为 movable-area组件 滑动事件被catch掉，无法滑动；
2. 记录滑动经过的项，在页面【底层】设置经过项为其他样式（算是补足没有滑动动画的缺陷吧，不需要可以删除 lastTarget字段）。

touchend

滑动结束时触发

1. 获取目标节点索引，将初始拖拽节点移动至目标节点，其中的关键代码为：

list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]);  // 移动位置

(这行代码参考了Vue.Draggable中一行代码)

2. 将其他设置置空

代码

代码片段

码云仓库 欢迎star、提问题。鞋鞋

参考链接

[1] SortableJS Vue.Draggable

[2] SortableJS Sortable

[3] SortableJS演示示例 Vue.Draggable

[4] 好想再胖十斤 25行代码解决小程序的拖拽排序