在前端开发中，我们经常需要对列表进行排序操作，而使用手写排序代码难以保证效率和稳定性，因此我们可以考虑使用第三方库来进行排序操作。其中，sortablejs 是一款功能强大的排序库，它支持多种排序类型和自定义排序规则，是我们常用的前端库之一。本文将详细介绍如何使用 npm 包 sortablejs ，并附上实例代码。
安装
在开始使用 sortablejs 之前，我们需要先安装它。我们可以使用 npm 命令行工具来进行安装：
npm install sortablejs --save
安装完成后，我们就可以开始使用 sortablejs 来进行列表排序操作了。
示例代码
接下来，我们来看一个简单的示例代码，展示如何使用 sortablejs 来进行列表排序。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------
------- ------------------------------------------------------------------------------
-------
-- -
------- -----
-------- -----
------- --- ----- ------
-
--------
-------
------
--- ----------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-----
--------
----- ---- - --------------------------------
--- -------------- -
---------- ----
----------- --------
------------ ---------
---------- ------
---
---------
-------
-------上述代码中，我们首先引入了 sortablejs 库，并设置了样式（可选）。然后，我们创建了一个 ul 列表，并为其每个 li 子元素赋值。最后，我们使用 sortablejs 对列表进行了初始化。
操作
在我们初始化 sortablejs 后，我们可以对列表进行拖动和放置操作。具体而言，我们可以进行以下操作：
- 选择：单击项以选择它。
- 拖动：按住鼠标左键拖动所选项。如果拖动时，鼠标指针经过另一个项，则该项会成为下一个要移动到的位置。
- 放置：释放鼠标左键以将所选项放置在目标位置。
参数
在初始化 sortablejs 时，我们可以向其传递一些参数以定制化其行为。下面是 sortablejs 提供的一些参数：
animation：设置排序动画的延迟时间，单位为毫秒，默认值为150。ghostClass：拖动过程中出现的 “ghost” 类名。chosenClass：拖动时所选元素的类名。dragClass：拖动时所操作元素的类名。handle：设置可拖动句柄元素的 CSS 选择器字符串。filter：设置排除拖动元素的 CSS 选择器字符串。group：设置列表的分组，具有相同分组的列表可以互相拖动排序。
总结
使用 sortablejs 可以方便地进行列表排序操作，减少手写排序代码的工作量。本文详细介绍了如何安装 sortablejs ，提供了一个示例代码，并讲解了 sortablejs 的操作和参数。希望本文能够对读者了解 sortablejs 的使用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/202969