拖拽排序列表
更新记录
v1.0.1（2025-06-10）
下载此版本
修复拖拽过程中卡住问题
v1.0.0（2025-02-18）
下载此版本
v1.0.0
平台兼容性
uni-app(4.01)
Vue2
Vue3
Chrome
Safari
app-vue
app-nvue
Android
iOS
鸿蒙
√
√
-
√
√
√
-
-
-
微信小程序
支付宝小程序
抖音小程序
百度小程序
快手小程序
京东小程序
鸿蒙元服务
QQ小程序
飞书小程序
快应用-华为
快应用-联盟
√
-
-
-
-
-
-
-
-
-
-
uni-app x(4.01)
Chrome
Safari
Android
iOS
鸿蒙
微信小程序
-
-
-
-
-
-
其他
多语言
暗黑模式
宽屏模式
×
×
√
DraggableList 拖拽排序组件
一个基于 uni-app 的轻量级拖拽排序列表组件
支持流畅的拖拽动画和自动排序功能。
功能特点
🚀 流畅的拖拽动画效果
📱 完美支持移动端触摸操作
🎯 精确的位置计算和自动排序
💫 平滑的过渡动画
🔒 智能的边界处理
🎨 可自定义样式
📦 零依赖，轻量化实现
安装使用
复制 DraggableList 组件到你的项目中。
在页面中引入并使用：
API 文档
Props
属性
类型
必填
说明
list
Array
是
列表数据
列表项数据格式
interface ListItem {
id: number | string; // 唯一标识
text: string; // 显示文本
icon?: string; // 图标路径（可选）
}
实现原理
触摸处理
监听 touchstart、touchmove 和 touchend 事件。
计算触摸点相对位置和移动距离。
位置计算
使用 transform 进行位置变换。
实时计算目标位置和索引。
动画效果
使用 CSS transition 实现平滑过渡。
拖拽时禁用动画以保证响应度。
自动排序
基于当前位置计算目标索引。
使用数组操作实现列表重排。
注意事项
确保列表项都有唯一的 id。
建议列表项不要过多（建议不超过 50 个）。
icon 路径需要是有效的图片资源。
适配不同屏幕尺寸时注意单位使用 rpx。
兼容性
支持所有 uni-app 支持的平台。