拖拽排序库:列表拖拽排序组件(261)
📅 2026/7/27 7:12:31
👁️ 阅读次数
📝 编程学习
在 Web 前端开发中,实现列表的拖拽排序有多种成熟的开源库可供选择。以下是几款主流且功能强大的拖拽排序库及其特点:
1. Sortable.js(最推荐)
Sortable 是一款专为可重排拖拽列表设计的 JavaScript 库,是目前业界使用最广泛的方案之一。
- 核心特性:支持触摸设备和现代浏览器(包括 IE9);支持在同一个列表内或不同列表之间进行拖拽;内置 CSS 移动动画、智能自动滚动以及高级交换检测。
- 框架兼容性:框架无关,原生支持 Meteor、Angular、React、Vue、Knockout 等主流框架,同时也兼容 Bootstrap 等 CSS 库。
- 高度可定制:提供丰富的配置选项,如拖拽句柄(handle)、拖拽占位符样式(ghostClass)、动画速度、分组排序(group)等。
- 模块化设计:支持按需引入核心库或包含所有插件的完整版本,方便控制打包体积。
2. Dragula
Dragula 是一款轻量级的纯 JS 元素拖放插件,以极其简单的 API 和出色的移动端体验著称。
- 核心特性:设置非常简单,无外部依赖;支持移动触摸屏设备(可通过手指拖动 DOM 元素);被移动项自带半透明的视觉效果;兼容 IE7+ 的所有现代浏览器。
- 灵活配置:支持定义元素是否可拖动(moves)、是否允许放入目标容器(accepts)、是移动还是复制元素(copy),以及溢出时的处理策略(如放回原位或移除)。
3. 跨端开发专属方案(如 uni-app)
如果你的项目是基于跨端框架(如 uni-app / uni-app x)开发,建议使用专门适配的组件:
- LfDnd 拖拽排序组件:专为 uni-app 打造,支持列表、宫格、多列布局及图片排序。支持长按拖拽、手柄拖拽、禁用项、固定项,以及拖拽悬浮、占位和让位动画。已验证在 H5(Chrome/Safari)、Android App-vue 和微信小程序下均可正常使用。
编程学习
技术分享
实战经验