介绍
jQuery Nestable 是一个方便的插件，用于创建嵌套列表。它允许用户通过拖放操作轻松地对列表进行排序，并且可以将排序后的结果更新到数据库中。
本文将详细讨论如何使用 jQuery Nestable 插件，在拖动子项并更新数据库后获取子项和 id。
实现方法
步骤1：初始化 Nestable 插件
首先，我们需要引入 Nestable 插件库，并初始化该插件。以下是引入和初始化 Nestable 插件的示例代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js"></script>
<script>
$(document).ready(function() {
$('.dd').nestable();
});
</script>这个代码段将会对带 .dd 类名的元素应用 Nestable 插件。你可以根据自己的情况更改类名。
步骤2：监听拖放事件
当用户通过拖放操作重新排列了列表时，我们需要捕获该事件并更新数据库。以下是一个捕获拖放事件的示例代码：
$('.dd').on('change', function() {
// 更新数据库
});步骤3：获取子项和 id
在拖动子项并更新数据库后，我们需要获取每个子项及其相应的 id。以下是获取子项和 id 的示例代码：
-- -------------------- ---- -------
--------------------- ---------- -
--- ---- - -------------------------------
--------
----- -------
---- ----------
----- ------ ------
-------- ------------------ -
-- --------
----------------------
-- ----------- --
--- ---- - - -- - - ------------ ---- -
--- ---- - --------
--- ------ - --------
--- -------- - --------------
-- ------ --
-- ---
-
--
------ --------------- -
-------------------
-
---
---在这个示例代码中，$('.dd').nestable('serialize') 将返回一个数组，该数组包含列表中每个子项的信息。
每个子项对象都包含以下属性：
id：子项的唯一标识符。text：子项显示的文本。parent_id：父节点的 id（如果有）。children：子节点的数组（如果有）。
我们可以使用上述方法获取每个子项及其相应的 id 和子项。你可以根据自己的情况进行进一步处理。
总结
通过本篇文章，我们学习了如何在使用 jQuery Nestable 插件时，获取拖放子项的 id 和子项。这对于实现具有嵌套列表的 Web 应用程序非常有用。
示例代码：https://codepen.io/lunamoonfang/pen/YzWxoYr
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29759