还在痛苦前端的拖拽排序吗？SortableJS 轻松搞定

产品扔过来一个需求：这个列表需要实现拖拽排序，心里面慌不慌？
如果要手搓一个这个功能，那代码可就很感人了。
大概有这么些逻辑：鼠标按下 -> 开始拖动 -> 拖动中实时改变位置 -> 拖动结束判断是否允许释放 -> 不允许缩放怎么做 -> 允许缩放又怎么做。
要实现这一大堆逻辑，那画面很美~~
别慌，面向 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. <ul  id="sortable">
2.   <li  data-id="item-1">1</li>
3.   <li  data-id="item-2">2</li>
4.   <li  data-id="item-3">3</li>
5.   <li  data-id="item-4">4</li>
6. </ul>

复制代码

可使用 data-id 属性自定义元素 ID，方便在 vue 项目中与数据关联。
多列表互动

使用 group 属性可对拖拽分组，同一组中的元素允许互动，也可设置 put: false 禁止放入。

源码：

1. <ul  id="sortable">
2.   <li  data-id="item-1">1</li>
3.   <li  data-id="item-2">2</li>
4.   <li  data-id="item-3">3</li>
5.   <li  data-id="item-4">4</li>
6. </ul><ul  id="sortable">
7.   <li  data-id="item-1">1</li>
8.   <li  data-id="item-2">2</li>
9.   <li  data-id="item-3">3</li>
10.   <li  data-id="item-4">4</li>
11. </ul>

复制代码

更多使用方式

官方文档：https://sortablejs.github.io/Sortable/
中文网：https://sortablejs.com/
配置项：https://sortablejs.com/options
npm 安装

1. npm install sortablejs --save

复制代码

使用

1. // 默认引用
2. import Sortable from 'sortablejs';
4. // 模块化核心代码，不包含插件
5. // import Sortable from 'sortablejs/modular/sortable.core.esm.js';
7. // 模块化完整代码，包含所有插件
8. // import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
10. // 初始化
11. new Sortable(document.getElementById('sortable'), {
12.   animation: 150,
13.   // 结束拖拽
14.   onEnd: function () {
15.     const list = this.toArray()
16.     console.log(JSON.stringify(list));
17.   },
18. })

复制代码

模块化引入

1. import Sortable from 'https://registry.npmmirror.com/sortablejs/1.15.6/files/modular/sortable.complete.esm.js';
3. // 初始化
4. new Sortable(document.getElementById('sortable'), {
5.   animation: 150,
6.   // 结束拖拽
7.   onEnd: function () {
8.     const list = this.toArray()
9.     console.log(JSON.stringify(list));
10.   },
11. })

复制代码

写在最后

拖拽排序这需求，一般在交互要求高的项目中，基本上都会遇到，手搓轮子虽然没啥难度，但实现起来的流程太复杂，基本上都是直接使用开源插件。
如果是 Vue 项目，可参考 https://github.com/SortableJS/Vue.Draggable，虽然都是同一家的代码，但这插件已年久失修（最近更新 2020 年），估计需要自己填坑。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！