Nestable2是一个基于jQuery的可嵌套列表插件，适用于前端开发中的拖拽、排序等场景。本文将详细介绍如何使用npm包nestable2，并提供示例代码和指导意义。
安装
在使用nestable2之前，需要先安装它。我们可以使用npm来安装：
npm install nestable2
当然，你也可以直接下载源码，然后引入相关文件。
使用教程
HTML结构
首先，我们需要准备一个HTML结构用于渲染嵌套列表。例如：
-- -------------------- ---- -------
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
-----
-----
-----
------其中，.dd 是nestable2所需的外部容器，.dd-list 是嵌套列表，.dd-item 表示每个列表项， data-id 属性用于指定每个列表项的唯一标识。
引入并初始化
在HTML中引入nestable2的相关文件：
<link rel="stylesheet" href="path/to/nestable.css"> <script src="path/to/jquery.js"></script> <script src="path/to/jquery.nestable.js"></script>
然后，我们可以通过以下方式来初始化nestable2插件：
$('.dd').nestable();配置项
当然，除了基本的初始化之外，nestable2还提供了一些可配置的选项，例如：
$('.dd').nestable({
maxDepth: 3,
group: 1
});其中，maxDepth 表示嵌套列表的最大深度， group 表示嵌套列表所属的分组。
事件监听
nestable2插件还提供了一些事件，我们可以监听这些事件以进行相应的业务逻辑处理。例如：
$('.dd').on('change', function() {
// 当列表项顺序发生变化时触发
});
$('.dd').on('dragStart', function(event, item) {
// 当开始拖拽某个列表项时触发
});API方法
nestable2还提供了一些API方法，以方便我们在代码中操作嵌套列表。例如：
// 获取当前列表项数据
var data = $('.dd').nestable('serialize');
// 更新某个列表项的数据
$('.dd').nestable('toHierarchy');示例代码
下面是一个完整的示例代码，实现了一个可拖拽的嵌套列表，并能够实时更新列表项的顺序：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------------
----- ---------------- -------------------------------------------------------
-------
--- -
---------- ------
------- - -----
-
-------- -
------------- -----
-
-------- - ------ -
------------ -----
-
--------
-------
------
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------