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

产品扔过来一个需求：这个列表需要实现拖拽排序，心里面慌不慌？

如果要手搓一个这个功能，那代码可就很感人了。

大概有这么些逻辑：鼠标按下 -> 开始拖动 -> 拖动中实时改变位置 -> 拖动结束判断是否允许释放 -> 不允许缩放怎么做 -> 允许缩放又怎么做。

要实现这一大堆逻辑，那画面很美~~

---

别慌，面向 github 编程，已经有人造了轮子，咱们用起来即可。

SortableJS

项目主页：https://github.com/SortableJS/Sortable
Star: 12.6k
大小：45.1kB (gzip 17.3kB)
开源协议：MIT

根据官方示例，此插件可以实现这些功能：

1. 单列表拖拽排序。
2. 多列表相互拖拽排序。
3. 通过拖拽克隆复制节点到列表。
4. 允许 A -> B 拖拽，但 B 不允许拖拽 A
5. 允许指定拖拽位置，比如只有列表序号能拖拽排序。
6. 禁止列表某些项拖拽。
7. 允许设置可放置区域。
8. 允许嵌套的拖拽排序。

基础示例

bootcdn 上的 Sortable 鱼目混珠的有点多，建议还是从 github 或者 npm 上面下载。

源码：

<ul class="list" id="sortable">
  <li class="item" data-id="item-1">1</li>
  <li class="item" data-id="item-2">2</li>
  <li class="item" data-id="item-3">3</li>
  <li class="item" data-id="item-4">4</li>
</ul>

<style>
  .list {
    list-style: none;
    padding: 0;
    width: 300px;
  }
  .item {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #999;
    color: #fff;
  }
</style>

<script src="https://registry.npmmirror.com/sortablejs/1.15.6/files/Sortable.min.js"></script>
<script>
// 初始化
new Sortable(document.getElementById('sortable'), {
  animation: 150,
  // 结束拖拽
  onEnd: function () {
    const list = this.toArray()
    console.log(JSON.stringify(list));
  },
})
</script>

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

多列表互动

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

源码：

<ul class="list1" id="sortable1">
  <li class="item" data-id="item-1">1</li>
  <li class="item" data-id="item-2">2</li>
  <li class="item" data-id="item-3">3</li>
  <li class="item" data-id="item-4">4</li>
</ul>
<ul class="list2" id="sortable2">
  <li class="item" data-id="item-1">1</li>
  <li class="item" data-id="item-2">2</li>
  <li class="item" data-id="item-3">3</li>
  <li class="item" data-id="item-4">4</li>
</ul>

<style>
  ul {
    list-style: none;
    padding: 0;
  }
  .list1 {
    display: flex;
    align-items: center;
  }
  .list1 .item {
    padding: 8px 16px;
    margin-right: 16px;
    border: 1px solid #999;
  }
  .list2 {
    width: 300px;
  }
  .list2 .item {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #999;
    color: #fff;
  }
</style>

<script src="https://registry.npmmirror.com/sortablejs/1.15.6/files/Sortable.min.js"></script>
<script>
new Sortable(document.getElementById('sortable1'), {
  group: {
    name: 'test-group',
    pull: 'clone',
    put: false // 不允许拖拽进这个列表
  },
  animation: 150,
  sort: false // 设为false，禁止sort
});

new Sortable(document.getElementById('sortable2'), {
  group: 'test-group',
  animation: 150
});
</script>

更多使用方式

官方文档：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 年），估计需要自己填坑。