汉谮绕椒Star: 12.6k

大小：45.1kB (gzip 17.3kB)

开源协议：MIT

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

单列表拖拽排序。

多列表相互拖拽排序。

通过拖拽克隆复制节点到列表。

允许 A -> B 拖拽，但 B 不允许拖拽 A

允许指定拖拽位置，比如只有列表序号能拖拽排序。

禁止列表某些项拖拽。

允许设置可放置区域。

允许嵌套的拖拽排序。

基础示例

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

1

源码：

• • 1
  • 2
  • 3
  • 4

<script src="https://registry.npmmirror.com/sortablejs/1.15.6/files/Sortable.min.js"></script>

<script></script>

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

多列表互动

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

2

源码：

• • 1
  • 2
  • 3
  • 4

• • 1
  • 2
  • 3
  • 4

<script src="https://registry.npmmirror.com/sortablejs/1.15.6/files/Sortable.min.js"></script>

<script></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));

},

})

写在最后

拖拽排序这需求，一般在交互要求高的项目中，基本上都会遇到，手搓轮子虽然没啥难度，但实现起来的流程太复杂，基本上都是直接使用开源插件。