还在痛苦前端的拖拽排序吗？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 上面下载。
源码：
<ulid="sortable">
<lidata-id="item-1">1</li>
<lidata-id="item-2">2</li>
<lidata-id="item-3">3</li>
<lidata-id="item-4">4</li>
</ul>可使用 data-id 属性自定义元素 ID，方便在 vue 项目中与数据关联。
多列表互动
使用 group 属性可对拖拽分组，同一组中的元素允许互动，也可设置 put: false 禁止放入。
源码：
<ulid="sortable">
<lidata-id="item-1">1</li>
<lidata-id="item-2">2</li>
<lidata-id="item-3">3</li>
<lidata-id="item-4">4</li>
</ul><ulid="sortable">
<lidata-id="item-1">1</li>
<lidata-id="item-2">2</li>
<lidata-id="item-3">3</li>
<lidata-id="item-4">4</li>
</ul>更多使用方式
官方文档：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 年），估计需要自己填坑。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ yyds。多谢分享 感谢，下载保存了 热心回复！ 感谢分享，下载保存了，貌似很强大 谢谢分享，试用一下 谢谢楼主提供！ 感谢发布原创作品，程序园因你更精彩 不错，里面软件多更新就更好了 不错，里面软件多更新就更好了 谢谢分享，辛苦了 感谢发布原创作品，程序园因你更精彩 鼓励转贴优秀软件安全工具和文档！ 不错，里面软件多更新就更好了 新版吗？好像是停更了吧。 用心讨论，共获提升！ 谢谢分享，辛苦了 感谢分享 收藏一下 不知道什么时候能用到 东西不错很实用谢谢分享
页:
[1]
2