uniapp+v3开发小程序拖拽排序功能

项目需求:需要根据用户喜好手动排序(这里只需要上下排序)

排序前(左图) => 排序时(右图) 拖动演示

思路:

1.创建一个拖动的元素,当拖动元素与其他元素触碰时更换位置重排列表

2.长按元素记录起点位置与下标,并将目标元素赋值与拖动元素

3.移动时处理触碰逻辑

4.松手时清空拖动元素

5.全部代码如下

1.getPos方法获取每个元素的位置top/left,便于交互后重新排列的元素定位

2.getIntersectRow方法根据拖动元素的top及bottom判断与那个元素相交,可能不止一个,取相交部分最多一个

{{item.key}} {{${item.val}${item.unit}}}

{{activeItem.key}}

{{isSort ? ‘确认’ : ‘参数排序’}}

注意: 拖动后再给原数组赋值时需加上nextTick函数,如需多行多列拖动只需再次基础上加部分逻辑即可