产品扔过来一个需求：这个列表需要实现拖拽排序，心里面慌不慌？
如果要手搓一个这个功能，那代码可就很感人了。
大概有这么些逻辑：鼠标按下 -> 开始拖动 -> 拖动中实时改变位置 -> 拖动结束判断是否允许释放 -> 不允许缩放怎么做 -> 允许缩放又怎么做。
要实现这一大堆逻辑，那画面很美~~
别慌，面向 github 编程，已经有人造了轮子，咱们用起来即可。
SortableJS
项目主页：https://github.com/SortableJS/Sortable
Star: 12.6k
大小：45.1kB (gzip 17.3kB)
开源协议：MIT
根据官方示例，此插件可以实现这些功能：
单列表拖拽排序。
多列表相互拖拽排序。
通过拖拽克隆复制节点到列表。
允许 A -> B 拖拽，但 B 不允许拖拽 A
允许指定拖拽位置，比如只有列表序号能拖拽排序。
禁止列表某些项拖拽。
允许设置可放置区域。
允许嵌套的拖拽排序。
基础示例
bootcdn 上的 Sortable 鱼目混珠的有点多，建议还是从 github 或者 npm 上面下载。
源码：
- 1
- 2
- 3
- 4
可使用 data-id 属性自定义元素 ID，方便在 vue 项目中与数据关联。
多列表互动
使用 group 属性可对拖拽分组，同一组中的元素允许互动，也可设置 put: false 禁止放入。
源码：
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
更多使用方式
官方文档：https://sortablejs.github.io/Sortable/
中文网：https://sortablejs.com/
配置项：https://sortablejs.com/options
npm 安装
npm install sortablejs --save
使用
// 默认引用
import Sortable from 'sortablejs';
// 模块化核心代码，不包含插件
// import Sortable from 'sortablejs/modular/sortable.core.esm.js';
// 模块化完整代码，包含所有插件
// import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
// 初始化
new Sortable(document.getElementById('sortable'), {
animation: 150,
// 结束拖拽
onEnd: function () {
const list = this.toArray()
console.log(JSON.stringify(list));
},
})
模块化引入
import Sortable from 'https://registry.npmmirror.com/sortablejs/1.15.6/files/modular/sortable.complete.esm.js';
// 初始化
new Sortable(document.getElementById('sortable'), {
animation: 150,
// 结束拖拽
onEnd: function () {
const list = this.toArray()
console.log(JSON.stringify(list));
},
})
写在最后
拖拽排序这需求，一般在交互要求高的项目中，基本上都会遇到，手搓轮子虽然没啥难度，但实现起来的流程太复杂，基本上都是直接使用开源插件。
如果是 Vue 项目，可参考 https://github.com/SortableJS/Vue.Draggable，虽然都是同一家的代码，但这插件已年久失修（最近更新 2020 年），估计需要自己填坑。