简介
ddnestable 是一个基于 jQuery 的嵌套列表拖拽插件，支持无限层级嵌套和拖拽排序，可以用于制作可嵌套的树形结构、拖拽排序、导航菜单等功能。本文将介绍 ddnestable 的使用方法，并附带实例代码。
安装
首先需要在项目中安装 ddnestable ，可以使用 npm 进行安装，也可以手动下载并导入。
使用 npm 安装：
npm install ddnestable
在 HTML 文件中导入：
<script src="path/to/jquery.min.js"></script> <script src="path/to/ddnestable/jquery.ddnestable.min.js"></script> <link rel="stylesheet" href="path/to/ddnestable/jquery.ddnestable.css">
使用方法
初始化
在 HTML 文件中添加一个空的容器，调用 ddnestable() 方法进行初始化：
<div id="ddnestable"></div>
$('#ddnestable').ddnestable();数据结构
ddnestable 的数据结构为嵌套的数组，每个元素包含以下属性：
id：元素的唯一标识符content：元素的内容，可以是字符串或 HTML 元素children：子元素的数组，可选，包含相同的属性
-- -------------------- ---- -------
--- ---- - -
-
--- --
-------- --------
--------- -
-
--- --
-------- --------
--------- -
-
--- --
-------- -------
--
-
--- --
-------- -------
-
-
--
-
--- --
-------- -------
-
-
--
-
--- --
-------- -------
-
-事件
ddnestable 支持以下事件：
change：当列表中的元素改变时触发start：当开始拖拽元素时触发stop：当停止拖拽元素时触发
$('#ddnestable').on('change', function() {
console.log($('#ddnestable').data('nestable').serialize());
});serialize() 方法可以将当前列表的嵌套数据结构序列化成一维数组，可以用于保存数据。
选项
ddnestable 支持以下选项：
maxDepth：最大嵌套深度group：拖拽分组，相同分组的元素可以在列表之间拖拽
$('#ddnestable').ddnestable({
maxDepth: 3,
group: 1
});示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
---- ----------------------
------- ----------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
-----
----------------
--------------------------------------------------------------------------------
--
--------
--- ---- - -
-
--- --
-------- --------
--------- -
-
--- --
-------- --------
--------- -
-
--- --
-------- -------
--
-
--- --
-------- -------
-
-
--
-
--- --
-------- -------
-
-
--
-
--- --
-------- -------
-
--
-----------------------------
----- -----
--------- -------- --- -- -
---------------
-
---
---------结语
ddnestable 是一款非常实用的 jQuery 插件，可以用于制作可嵌套的树形结构、拖拽排序、导航菜单等功能。本文介绍了 ddnestable 的使用方法，并附带实例代码，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe381e8991b448dd840