如何使用sortable？

Sortable 是什么

Sortable 是一款 JavaScript 库，可以使用户拖动和重新排序需要排序的元素，同时它还支持多种排序方式和自定义事件。

Sortable 的基本使用

使用 Sortable 需要先引入库文件，然后通过指定需要排序的元素的 class 或 id 来初始化 Sortable 工具。

例如：

var sortableList = document.getElementById('sortable-list');
new Sortable(sortableList, {
    animation: 150 // 动画时间
});

这里的 `sortableList` 就是被排序的元素，它需要拥有子元素，并且每个子元素都是可以拖动的。

在初始化 Sortable 后，我们可以设置一些参数。例如，上述代码中的 `animation` 表示排序时动画的时间为 150 毫秒。

Sortable 的事件机制

Sortable 提供了多种事件以便开发者对排序过程进行监听和处理。

• onStart：开始排序时触发的事件
• onEnd：排序结束时触发的事件
• onAdd：将一个元素加入到另一个元素时触发的事件
• onUpdate：排序结束并且位置改变时触发的事件
• onRemove：将一个元素从列表中删除时触发的事件

例如，我们可以监听 `onUpdate` 事件，并在事件触发时更新列表。

new Sortable(sortableList, {
    onUpdate: function (evt) {
        var item = evt.item; // 拖动的元素
        var oldIndex = evt.oldIndex; // 原来的位置
        var newIndex = evt.newIndex; // 新的位置
        list.update(oldIndex, newIndex); // 更新列表
    }
});

Sortable 的高级用法

Sortable 还提供了一些高级功能，比如可以自定义排序规则、禁止某些元素拖放、手动触发排序等。

例如，我们可以通过下面的方式实现拖放时禁止一些元素：

new Sortable(sortableList, {
    filter: '.no-sort'
});

这里的 `.no-sort` 表示禁止拖放的元素所使用的类名。

除此之外，Sortable 还支持手动触发排序。例如，我们可以在用户点击一个按钮时手动进行排序：

var sortableList = document.getElementById('sortable-list');
var sortable = new Sortable(sortableList, {
    animation: 150,
    onSort: function (evt) {
        console.log('sort');
    }
});
document.getElementById('sort-btn').addEventListener('click', function () {
    sortable.sort([3, 1]); // 手动进行排序，参数为需要排序的子元素的索引
});

在上述代码中，需要手动进行排序时，我们调用了 `sortable.sort([3, 1])` 方法，并传入需要排序的子元素的索引。

结语

Sortable 是一款功能强大、易于使用且高度可定制的 JavaScript 库。通过本文的介绍，相信大家已经了解了 Sortable 的基本使用和高级功能，可以在实现拖放排序的需求时更加快速和高效地完成开发。