前言
在前端开发中，经常需要使用可拖拽的可嵌套列表，例如类别管理、菜单导航等。此时，我们通常需要使用一些开源的组件来方便地实现这一功能。本篇文章将详细介绍一个 npm 包 nestable2-old 的使用方法。nestable2-old 是一个基于 jQuery 开发的可嵌套列表插件，支持拖放、折叠等操作。
安装与导入
首先，我们需要使用 npm 安装 nestable2-old：
--- ------- ------------- ------
然后，在我们的前端代码中导入相关文件。
CSS 导入
在 head 中导入 CSS 文件：
----- ---------------- ---------------------------------------------------------
JS 导入
在 body 的最下方导入 JS 文件：
------- --------------------------------------------------------- ------- ----------------------------------------------------------------
初始化
在网页 DOM 树加载完成后，我们需要将 nestable2-old 组件绑定到一个 DOM 元素上。
HTML
在网页中添加一个 DIV 元素，作为你的嵌套列表容器。此元素下可以添加嵌套的 LI 元素。
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
-----
-----
-----
------JS
在 JS 代码中，我们需要选择并初始化刚才添加的 DIV 元素，如下所示：
--------------------
配置项
nestable2-old 提供了多个可选配置项，可以根据实际需求进行设置。以下是一些常见的配置。
样式选择器
我们可以通过配置不同的样式选择器来实现样式定制。对于嵌套列表中的不同元素，nestable2-old 提供了以下样式选择器：
dd：列表容器选择器dd-item：列表项选择器dd-handle：拖拽句柄选择器dd-empty：空的列表项选择器dd-list：子列表选择器
例如，我们可以通过配置自定义样式选择器 .my-handle 来替换默认的 .dd-handle：
------------------- ------------ ----------- ---
最大嵌套深度
我们可以通过配置 maxDepth 来限制列表的嵌套深度。在该参数设为 1 的情况下，列表将不能再嵌套子列表。
------------------- --------- - ---
回调函数
nestable2-old 提供了多个回调函数，我们可以通过设置这些回调来实现对列表操作的 DOM 操作、AJAX 请求等功能。
以下是一些常用的回调：
callback：回调函数，每当元素重组时被调用onDragStart：拖放开始前的回调函数beforeDragStop：拖放停止前的回调函数（例如用于拖放前的确认框弹出）afterDrop：拖放结束后的回调函数serialize：取回当前列表的嵌套数据listNodeName：嵌套列表的选择器名称itemNodeName：嵌套列表项的选择器名称
例如，我们可以通过设定回调函数 beforeDragStop 来实现拖放前的确认框：
-------------------
--------------- ------------
-------------------------
------ -----
- ---- -
------ ------
-
-
---示例
以下是一个完整的 nestable2-old 实现示例。
HTML
---- -----------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
--- ----------------
--- --------------- ------------
---- ---------------------- -------
-----
--- --------------- ------------
---- ---------------------- -------
-----
-----
-----
-----
-----
-----
------CSS
---------- - -------- ------ -------- --- ----- ---------- ----- ------------ ---- ------ ----- ------- ----- ----------------- -------- ------- --- ----- ----- -------------- ---- -------------- ---- - ---------------- - ----------------- -------- - -------- -------- - ------------ ----- -------------- -- -
JS
---------------------------- -
-------------------
--------- --
------------ ------------
--------------- ------------
-------------------------
------ -----
- ---- -
------ ------
-
--
--------- ----------- -
---------------
-
---
---------------------------------
---总结
本篇文章介绍了 npm 包 nestable2-old 的使用方法，并详细讲解了常见的配置选项和回调函数。使用 nestable2-old 可以方便地实现嵌套列表的拖拽、折叠等操作，并可根据实际需求进行个性化的定制。希望本文能对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005798581e8991b448eb2ab