在前端开发中，实现可嵌套的列表是一项常见的任务。Nestable 是一个基于 jQuery 的插件，可以让你轻松地创建可嵌套的拖拽列表。本文将介绍如何使用 npm 包 Nestable 来实现这一功能。
安装 Nestable
首先，我们需要在项目中安装 Nestable。通过 npm 可以轻松地完成安装：
--- ------- -------- ------
初始化 Nestable
安装完成后，在需要使用 Nestable 的页面引入相关的 JavaScript 和 CSS 文件：
----- ---------------- ---------------------------- ------- --------------------------------- ------- ------------------------------------------
然后，我们可以通过调用 nestable() 方法来初始化 Nestable。以下是一个简单的示例：
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
-----
-----
-----
------
--------
---------------------------- -
--------------------
---
---------在这个示例中，我们创建了一个嵌套的列表，并在 $(document).ready() 函数中调用了 nestable() 方法来初始化 Nestable。通过设置 .dd 类作为容器元素，我们可以让用户拖动列表中的项以重新排列它们。
进阶使用
除了基本的嵌套列表功能外，Nestable 还提供了一些高级功能，如可定制化的操作按钮、回调函数等。以下是一些示例：
支持拖动排序和嵌套
---- ---------- --------------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
-----
-----
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
-----
------
--------
---------------------------- -
-------------------------
--------- -
---
---
---------在这个示例中，我们设置了 maxDepth 参数为 2，以限制嵌套的深度。通过这个参数，我们可以防止用户无意中创建过于复杂的嵌套结构。
自定义操作按钮
---- ---------- --------------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
------- ---------- ------ ---------- ----------------------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
------- ---------- ------ ---------- ----------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------