拖拽排序列表
思路
界面分为两层：
底层，正常列表展示，拖拽的时候不做处理（大牛直接加了动画，原谅我技艺不精，还没实现）
顶层，movable-view组件，不长按不展示，之后长按才展示，且没有点击事件。
事件
主要监听：longpress , touchmove , touchend 三个事件
longpress
保障长按才有效，并设定许多其他值。
touchmove
滑动的时候触发
判断是否需要滑动页面，因为 movable-area组件 滑动事件被catch掉，无法滑动；
记录滑动经过的项，在页面【底层】设置经过项为其他样式（算是补足没有滑动动画的缺陷吧，不需要可以删除
在微信小程序中实现拖拽排序列表是一项常见的交互需求，它能提供用户友好的操作体验。以下是一个关于如何创建此类功能的详细步骤和示例代码解析。
理解拖拽排序列表的基本思路。列表界面通常分为两层：底层是常规列表展示，拖拽时不进行处理；顶层则使用`movable-view`组件，它在不长按时不显示，长按时才出现，而且不响应点击事件。为了实现拖拽排序，我们需要监听`longpress`、`touchmove`和`touchend`这三个关键事件。
1. `longpress`事件：确保用户长按后才启动拖拽功能，同时可能需要设置其他相关状态。
2. `touchmove`事件：当手指在屏幕上移动时触发，用于判断是否需要滚动页面以及记录滑动经过的项。由于`movable-area`组件会捕获滑动事件，导致页面无法正常滚动，因此需要在此事件中处理页面滚动逻辑。同时，可以在底层列表中为经过的项设置临时样式，以模拟滑动动画（如果不需要这个效果，这部分代码可以删除）。
3. `touchend`事件：手指离开屏幕时触发，这时我们需要获取目标节点的索引，并将原始拖拽节点移动到目标位置。关键的代码行如下：
```
list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]);
```
这行代码先在目标索引位置`futureIndex`处插入原拖拽元素，然后从原始位置`dragElementIndex`移除该元素，从而实现列表元素的移动。
下面是一段简化版的微信小程序实现拖拽排序的示例代码：
```javascript
Page({
data: {
list: [], // 列表数据
moveSortBox: false, // 是否开启拖拽模式
clickIndex: -1, // 当前拖拽元素的索引
busActObj: null, // 当前拖拽的列表对象
sPageY: 0, // 初始点击的Y坐标
mPageY: 0 // 移动时的Y坐标
},
stratBtn: function(e) {
let index = e.currentTarget.dataset.index;
let list = this.data.list;
let pageY = e.touches[0].pageY;
let item = list[index];
this.setData({
sPageY: pageY,
mPageY: pageY,
moveSortBox: true,
clickIndex: index,
busActObj: item
});
},
moveBtn: function(e) {
let pageY = e.touches[0].pageY;
this.setData({ mPageY: pageY });
},
endBtn: function(e) {
let sPageY = this.data.sPageY;
let list = this.data.list;
let pageY = e.changedTouches[0].pageY;
let clickIndex = this.data.clickIndex;
let item = this.data.busActObj;
let position = Math.floor((pageY - sPageY) / 90) + (clickIndex + 1);
list.splice(clickIndex, 1);
list.splice(position, 0, item);
this.setData({
moveSortBox: false,
list: list,
clickIndex: -1,
busActObj: null
});
}
});
```
在这个示例中，我们定义了三个方法：`stratBtn`用于处理长按开始拖拽，`moveBtn`记录移动过程，而`endBtn`负责结束拖拽并更新列表顺序。请注意，实际应用中可能需要根据实际业务需求进行调整和完善，例如增加错误处理和动画效果。
参考链接：
1. SortableJS Vue.Draggable：https://github.com/SortableJS/Vue.Draggable
2. SortableJS Sortable：https://github.com/SortableJS/Sortable
3. SortableJS 演示示例：https://sortablejs.github.io/Sortable/
4. 好想再胖十斤 - 25行代码解决小程序的拖拽排序：http://www.haoxiangnaizhen.com/25-line-of-code-to-solve-the-drag-and-drop-sorting-of-mini-program/
以上是关于微信小程序拖拽排序列表的基本实现和示例代码解析，通过理解这些内容，开发者可以创建出具有拖拽排序功能的自定义列表组件。
- 1
- 2
前往页