Nestable2是一个基于jQuery的可嵌套列表插件，适用于前端开发中的拖拽、排序等场景。本文将详细介绍如何使用npm包nestable2，并提供示例代码和指导意义。
安装
在使用nestable2之前，需要先安装它。我们可以使用npm来安装：
--- ------- ---------
当然，你也可以直接下载源码，然后引入相关文件。
使用教程
HTML结构
首先，我们需要准备一个HTML结构用于渲染嵌套列表。例如：
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
-----
-----
-----
------其中，.dd 是nestable2所需的外部容器，.dd-list 是嵌套列表，.dd-item 表示每个列表项， data-id 属性用于指定每个列表项的唯一标识。
引入并初始化
在HTML中引入nestable2的相关文件：
----- ---------------- ---------------------------- ------- --------------------------------- ------- ------------------------------------------
然后，我们可以通过以下方式来初始化nestable2插件：
--------------------
配置项
当然，除了基本的初始化之外，nestable2还提供了一些可配置的选项，例如：
------------------- --------- -- ------ - ---
其中，maxDepth 表示嵌套列表的最大深度， group 表示嵌套列表所属的分组。
事件监听
nestable2插件还提供了一些事件，我们可以监听这些事件以进行相应的业务逻辑处理。例如：
--------------------- ---------- - -- ------------- --- ------------------------ --------------- ----- - -- ------------- ---
API方法
nestable2还提供了一些API方法，以方便我们在代码中操作嵌套列表。例如：
-- --------- --- ---- - ------------------------------- -- ---------- ---------------------------------
示例代码
下面是一个完整的示例代码，实现了一个可拖拽的嵌套列表，并能够实时更新列表项的顺序：
--------- -----
------
------
----- ----------------
---------------- ------------
----- ---------------- -------------------------------------------------------
-------
--- -
---------- ------
------- - -----
-
-------- -
------------- -----
-
-------- - ------ -
------------ -----
-
--------
-------
------
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ----
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------