SortJS能否轻松实现痛苦前端拖拽排序功能？
摘要：产品扔过来一个需求：这个列表需要实现拖拽排序，心里面慌不慌？ 如果要手搓一个这个功能，那代码可就很感人了。 大概有这么些逻辑：鼠标按下 -> 开始拖动 -> 拖动中实时改变位置 -&
产品扔过来一个需求：这个列表需要实现拖拽排序，心里面慌不慌？
如果要手搓一个这个功能，那代码可就很感人了。
大概有这么些逻辑：鼠标按下 -> 开始拖动 -> 拖动中实时改变位置 -> 拖动结束判断是否允许释放 -> 不允许缩放怎么做 -> 允许缩放又怎么做。
要实现这一大堆逻辑，那画面很美~~
别慌，面向 github 编程，已经有人造了轮子，咱们用起来即可。
SortableJS
项目主页：https://github.com/SortableJS/Sortable
Star: 12.6k
大小：45.1kB (gzip 17.3kB)
开源协议：MIT
根据官方示例，此插件可以实现这些功能：
单列表拖拽排序。
多列表相互拖拽排序。
通过拖拽克隆复制节点到列表。
允许 A -> B 拖拽，但 B 不允许拖拽 A
允许指定拖拽位置，比如只有列表序号能拖拽排序。
禁止列表某些项拖拽。
允许设置可放置区域。
允许嵌套的拖拽排序。
基础示例
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 禁止放入。