Sortable 是一个轻量级的 JavaScript 库，用于排序和拖放列表项。它是基于 HTML5 的 drag and drop API 构建的，并且具有可定制性强、易于使用的特点。在本文中，我们将讨论如何使用 npm 包 sortable 并提供详细的教程和示例代码。
安装
安装 sortable 是非常简单的。首先，打开终端并进入项目目录，然后运行以下命令：
npm install sortablejs
这将在您的项目中安装 sortable。
基本用法
使用 sortable 极其简单。首先，您需要创建一个 HTML 列表，然后初始化 sortable 对其进行排序和拖放操作。以下是一个最简单的示例：
<ul id="my-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
import Sortable from 'sortablejs';
var myList = document.getElementById('my-list');
new Sortable(myList);这将使您的列表变得可拖动，并允许对其中的项进行排序。
高级用法
可排序选项
您可以通过向 Sortable 构造函数传递选项对象来自定义 sortable 的行为。以下是可用选项的示例：
-- -------------------- ---- -------
--- ---------------- -
------ ---------
---------- ----
------- ----------
----------- -----------------
------ -------- ----- -
----------------- ----- ------ ------------- ----- --------------
-
---这些选项包括：
group：定义可以一起排序的列表。默认情况下，所有列表都是独立的。animation：定义动画持续时间（以毫秒为单位）。handle：指定应用于某个元素的手柄的选择器。仅允许在手柄上拖动。ghostClass：启用占位符元素时应用的类名。onEnd：当拖放操作结束时触发的回调函数。
除了这些选项之外，还有许多其他可用选项。您可以在 官方文档 中找到完整的选项列表。
事件
Sortable 还提供了几个事件，可以用来监视拖放操作中的不同阶段。以下是一些示例：
-- -------------------- ---- -------
--- ---------------- -
-------- -------- ----- -
----------------- ----------
--
------- -------- ----- -
-------------------- -- ---------
--
------ -------- ----- -
-------------------- ----- -- -------
--
--------- -------- ----- -
----------------- ----------
--
------- -------- ----- -
----------------- ---------
--
--------- -------- ----- -
-------------------- ------- ---- -------
--
------ -------- ----- -
----------------- --------
-
---这些事件包括：
onStart：在拖动操作开始时触发。onMove：在元素移动时连续触发。onAdd：当添加元素到列表中时触发。onUpdate：当列表项被更新时触发。onSort：每次排序时触发。onRemove：当元素从列表中删除时触发。onEnd：在拖动操作结束时触发。
方法
Sortable 还提供了几个方法，可以用来修改、重置和销毁 sortable。以下是一些示例：
var mySortable = new Sortable(myList); mySortable.sort([1, 0, 2]); // 对列表项进行排序。 mySortable.add(item); // 将元 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35181) ，转载请注明来源 [https://www.javascriptcn.com/post/35181](https://www.javascriptcn.com/post/35181)