什么是 sortablejs-nesting？
Sortablejs-nesting 是一款可以嵌套排序的 JavaScript 库，它是基于 Sortable 库进行开发的。它可以很方便地实现对多级嵌套列表或表格进行排序的功能。
Sortablejs-nesting 支持以下特性：
- 对多级嵌套列表或表格进行排序；
- 支持嵌套层数限制；
- 支持使用自定义类名和样式；
- 支持事件绑定和回调函数；
- 支持拖拽时显示占位符。
如何安装 sortablejs-nesting？
要使用 sortablejs-nesting，我们需要先安装它。首先，我们需要安装 npm 包管理器。安装成功后，我们在终端输入以下命令：
--- ------- ------------------ ------
这将会在我们的项目中安装 sortablejs-nesting 库，并将它写入 dependencies 部分的 package.json 文件中。
如何使用 sortablejs-nesting？
安装完成后，我们就可以开始使用 sortablejs-nesting 了。下面是一个使用 sortablejs-nesting 进行排序的示例：
--------- -----
------
------
------------------------- ------------
----- ---------------- ------------------------------------------------------- --
----- ---------------- --------------------------------------------------------------- --
-------
------
--- --------------- ---------
----
---- -
----
----------- ------
----------- ------
----------- ------
-----
-----
----
---- -
----
----------- ------
----------- ------
----------- ------
-----
-----
----
---- -
----
----------- ------
----------- ------
----------- ------
-----
-----
-----
------- -------------------------------------------------------
------- -----------------------------------------------------------------------
--------
--- -- - ------------------------------------
--- -------- - --- ------------ -
------ ---------
--------- -
---
---------
-------
-------我们首先引入了 sortablejs-nesting 和 sortablejs 的样式文件，然后在 HTML 中定义了一个带有嵌套列表的容器。接着，在 JavaScript 中，我们创建了一个 Sortablejs 的实例，并设置了一个嵌套分组，以及嵌套的最大深度为 2。
现在，我们打开该 HTML 文件，就可以看到带有拖拽排序的嵌套列表了。
> 注意：我们需要确保 sortablejs-nesting 的样式文件和 JavaScript 文件都已经被引用了。
sortablejs-nesting 的配置选项
Sortablejs-nesting 提供了多个配选项，可以帮助我们实现不同的组合排序功能。下面是 sortablejs-nesting 支持的配置选项及其说明：
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| group | string | 'nested' | 分组名称，用于与其他 Sortablejs 分组区分 |
| maxDepth | number | 2 | 允许嵌套的最大深度 |
| draggable | string | '.item' | 可拖动元素选择器 |
| handle | string | null | 句柄元素选择器 |
| nested | object | boolean | false | 嵌套排序时的设置 |
| filter | string | function | null | 过滤元素的选择器或函数 |
| animation | number | 150 | 动画持续时间，单位毫秒 |
| delay | number | object | 0 | 延迟时间，用于超时和延迟的配置 |
| setData | function | null | 在拖动开始时设置数据的回调函数 |
| sort | boolean | true | 是否启用排序功能 |
总结
在本教程中，我们学习了如何使用 sortablejs-nesting 库，它是一款可以嵌套排序的 JavaScript 库。我们学习了如何安装 sortablejs-nesting，以及如何在项目中使用它。我们还学习了 sortablejs-nesting 的配置选项，以及如何根据自己的需求进行设置。希望这个教程能够帮助你更好地使用 sortablejs-nesting，并在项目中实现拖拽排序嵌套列表的功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601e81e8991b448de4ae