当前位置：首页 > news >正文

使用uniapp——实现微信小程序的拖拽排序（vue3+ts）

news 2025/10/27 7:30:03

如何实现列表排序

一、效果展示

微信小程序实现拖拽排序展示

二、实现方案

方案1. 触摸事件实现拖拽排序

使用微信小程序支持的触摸事件：

@touchstart
@touchmove
@touchend
通过计算触摸位移来判断是否需要交换元素位置。

方案2. 利用按钮实现辅助排序

在每个分类项右侧添加上下箭头按钮：

点击向上箭头：将当前项与上一项交换位置
点击向下箭头：将当前项与下一项交换位置

三、功能特点

触摸拖拽：长按并移动来调整顺序
按钮操作：点击箭头按钮精确调整位置

四、原理讲解

由于微信小程序是没有dom元素的，因此我们常规的获取dom元素，并通过修改dom元素的位置的方式来实现拖拽排序已经行不通，也无法通过使用HTML5的拖拽API，因此我们需要找到适合微信小程序的方式——
触摸事件 + 数据交换来实现拖拽排序的效果。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
微信小程序提供的触摸事件

@touchstart - 手指触摸动作开始
@touchmove - 手指触摸后移动
@touchend - 手指触摸动作结束

当触摸开始时我们利用一个变量dragIndex记录被触摸的元素的index，并利用另一个变量startY记录被触摸元素的初始的y方向上的位置。
当触摸后移动时，我们通过touchmove返回的event变量，得知当前触摸的元素移动到哪里了，并判断移动的位置和初始的位置是否达到了该交换元素的值了，如果到达，就开始交换两个元素。交换之前，应该先判断触摸元素的移动方向，如果是移动的方向是向上，则让当前索引的元素和上方的元素交换，移动方向是向下，让当前索引的元素和下方的元素交换。
交换的方式则是利用索引，交换数组中两个元素
如果是辅助按钮的方式移动，则直接根据移动方向，与上方或下方元素进行交换位置。

五、问题

到目前为止，我们在拖动的时候，会出现页面跟着滚动的情况，如何防止在拖动的时候，防止页面跟着滚动呢？
在拖动时想要禁止页面滚动就让父盒子的catchtouchmove=“true”

六、完整代码

<!-- 拖拽排序区域 --><view v-if="showSortMode" class="p-4" catchtouchmove="true"><view class="space-y-2"><view v-for="(item, i) in categories" :key="item.id":class="['flex items-center justify-between bg-white rounded-lg p-4 border border-gray-200 transition-all duration-200',dragIndex === i ? 'opacity-50 scale-95' : '']"@touchstart="handleTouchStart($event, i)"@touchmove="handleTouchMove($event, i)"@touchend="handleTouchEnd($event, i)"><view class="flex items-center gap-3"><wd-icon name="drag" size="16px" color="#999" /><text class="text-gray-800">{{ item.name }}</text><text class="text-xs text-gray-500">({{ item.count }})</text></view><view class="flex items-center gap-2"><wd-icon name="arrow-up" size="14px" color="#666" @click="moveUp(i)" v-if="i > 0" /><wd-icon name="arrow-down" size="14px" color="#666" @click="moveDown(i)" v-if="i < categories.length - 1" /></view></view></view></view><script setup lang="ts">let dragIndex = ref(-1); // 当前拖拽的元素索引值
const showSortMode = ref(false); // 控制排序模式显示
let startY = 0; // 触摸开始的Y坐标
let currentY = 0; // 当前触摸的Y坐标// 触摸开始
const handleTouchStart = (e: any, index: number) => {dragIndex.value = index;startY = e.touches[0].clientY;// 当前触摸元素的初始触摸位置
};// 触摸移动
const handleTouchMove = (e: any, index: number) => {currentY = e.touches[0].clientY;const deltaY = currentY - startY;// 根据移动距离判断是否需要交换位置if (Math.abs(deltaY) > 50) { // 移动超过50px才触发交换const targetIndex = deltaY > 0 ? index + 1 : index - 1;if (targetIndex >= 0 && targetIndex < categories.value.length && targetIndex !== dragIndex.value) {swapItems(dragIndex.value, targetIndex);dragIndex.value = targetIndex;startY = currentY; // 重置起始位置}}
};// 触摸结束
const handleTouchEnd = (e: any, index: number) => {dragIndex.value = -1;startY = 0;currentY = 0;
};// 交换数组中两个元素的位置
const swapItems = (fromIndex: number, toIndex: number) => {[categories.value[fromIndex], categories.value[toIndex]] = [categories.value[toIndex], categories.value[fromIndex]];
};// 向上移动
const moveUp = (index: number) => {if (index > 0) {swapItems(index, index - 1);}
};// 向下移动
const moveDown = (index: number) => {if (index < categories.value.length - 1) {swapItems(index, index + 1);}
};interface Category {id: string;name: string;count: number;
}const categories = ref<Category[]>([{ id: '1', name: '饮料', count: 12 },{ id: '2', name: '小食', count: 8 },{ id: '3', name: '主食', count: 15 },{ id: '4', name: '甜品', count: 6 },{ id: '5', name: '热饮', count: 9 },
]);
</script>