本文详解如何在 jQuery UI Sortable 中正确配置嵌套结构，仅允许特定类（如 .moveFile）拖拽，彻底避免因误选祖先节点导致的 HierarchyRequestError 错误。核心在于精准初始化目标容器、合理使用 cancel 选项，并隔离不可拖拽的嵌套容器。
本文详解如何在 jquery ui sortable 中正确配置嵌套结构，仅允许特定类（如 `.movefile`）拖拽，彻底避免因误选祖先节点导致的 `hierarchyrequesterror` 错误。核心在于精准初始化目标容器、合理使用 `cancel` 选项，并隔离不可拖拽的嵌套容器。
在使用 jQuery UI Sortable 处理深度嵌套的 DOM 结构（如树形文件夹+文档列表）时，一个常见却棘手的问题是：误将父级容器（如 .moveFldr）本身设为可排序目标，导致拖拽任意子元素时触发 DOM 层级冲突——典型报错为：
HierarchyRequestError: Node.insertBefore: The new child is an ancestor of the parent
该错误本质是浏览器 DOM API 的安全限制：不允许将一个节点插入到其自身或其任意后代节点内部。而原始代码中：
$(".moveFldr").sortable({
connectWith: "div.moveFldr :not(.fldrIcon) :not(span)",
cancel: ".fldrIcon, .voidDoc"
});
问题在于：.moveFldr 同时出现在可拖拽项的父容器（如 #C2）和不可拖拽的层级容器（如 #F2, #C3, #C4 等）上。当用户点击 .fldrIcon（带计数器的文件夹标题）左侧空白处并拖拽时，Sortable 默认尝试将整个 .fldrIcon 元素作为拖拽项，而它恰好是当前 .moveFldr 容器的子节点——此时若目标位置落在其子树内（如下方同级 .moveFldr 内），就会触发上述 DOM 错误。
✅ 正确解法是 “只对真正承载可拖拽项的直接父容器初始化 Sortable”，而非全局绑定所有 .moveFldr。
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 推荐方案：精准初始化 + cancel 白名单
假设业务逻辑明确：仅 <div class="upDoc moveFile"> 类型的文档项允许拖拽，其余所有 <code>.fldrIcon、.moveFldr 容器均不可拖动。那么应将 Sortable 初始化在最靠近 .moveFile 的、且不包含其他 .moveFldr 的容器上——本例中即 #C2（其子元素包含 #F2、#L101、#C3 等）：
$(document).ready(function() {
$("#C2").sortable({
cancel: ".moveFldr, .fldrIcon, .voidDoc", // 明确禁止所有非文件项
placeholder: "placeHolder",
tolerance: "pointer" // 更精准的光标定位体验
});
});
? 关键点说明：
#C2是首个包含.moveFile的、纯净的列表容器（不含嵌套.moveFldr作为子项，仅含.fldrIcon和.moveFile）；cancel列表需覆盖所有不可拖拽元素：.moveFldr（防止拖拽文件夹容器）、.fldrIcon（防止拖拽标题）、.voidDoc（已定义的禁用项）；- 移除
connectWith：因本例无需跨容器拖拽，且复杂选择器易引入歧义；如需多容器联动，请确保connectWith指向的是同类纯净容器（如#C2, #C3, #C6），而非泛化的.moveFldr。
? 必须规避的陷阱
不要给嵌套容器重复初始化 Sortable
原始代码中$(".fldrIcon").sortable("disable")是无效的——.fldrIcon从未被初始化为 sortable，调用disable无意义，且可能干扰事件流。避免祖先-后代同名类污染
确保.moveFile的直接父容器不携带.moveFldr类（或通过 CSS 类重命名隔离）。示例中已将外层容器改为moveFldrrr，而仅保留#C2及其子.moveFldr用于结构标记，但不参与排序逻辑。-
HTML 结构建议优化
为提升语义与维护性，推荐将可拖拽区域显式包裹：<div id="C2" class="lnkItems" data-cid="2" style="padding-left:30px;"> <div class="folder-header">. Performance of Activates</div> <!-- ✅ 可拖拽区 --> <div class="sortable-zone"> <div id="L101" class="upDoc moveFile">MoveDocument</div> <div id="L202" class="upDoc moveFile">I'm another thing you can move!</div> </div> <!-- ? 不可拖拽的子文件夹（独立结构） --> <div id="C3" class="moveFldr lnkItems">...</div> </div>对应 JS 初始化更清晰：
$("#C2 .sortable-zone").sortable({ cancel: ":not(.moveFile)" });
✅ 最终验证要点
- ✅ 点击
.moveFile文字区域可正常拖拽排序； - ✅ 点击
.fldrIcon或任意.moveFldr容器空白处，鼠标变为默认箭头（不可拖拽）； - ✅ 拖拽过程中 placeholder 出现位置准确；
- ❌ 控制台不再出现
HierarchyRequestError。
通过聚焦真实可交互区域、精简初始化范围、明确 cancel 规则，即可在复杂嵌套场景下稳定、安全地使用 jQuery UI Sortable，兼顾功能与健壮性。
