本文详解 jquery ui sortable 在嵌套结构中失效的常见原因（如拼写错误、初始化对象错误），并提供可运行的嵌套排序完整示例，涵盖 html 结构、css 样式、js 初始化及关键配置说明。
本文详解 jquery ui sortable 在嵌套结构中失效的常见原因（如拼写错误、初始化对象错误），并提供可运行的嵌套排序完整示例，涵盖 html 结构、css 样式、js 初始化及关键配置说明。
要使 jQuery UI Sortable 正确支持嵌套可拖拽排序，必须满足三个核心前提：
✅ 使用正确的属性名（connectWith 而非 connectwith）；
✅ 将 .sortable() 初始化在容器元素（如 .sortableContainer）上，而非可拖拽项（.moveDvi）本身；
✅ 显式声明 items 选项以精准控制哪些子元素可被拖拽。
以下为推荐的结构化实现方案：
HTML 结构（层级清晰，容器统一标识）：
<div class="sortableContainer noDvi lay01">
<div class="moveDvi">test 01</div>
<div class="sortableContainer noMove lay01">
<div class="moveDvi">test 02</div>
<div class="sortableContainer noMove lay01">
<div class="moveDvi">test 03</div>
<div class="sortableContainer noMove lay01">
<div class="moveDvi">test 04</div>
</div>
</div>
</div>
</div>关键 JavaScript 初始化（注意大小写与作用对象）：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(".sortableContainer").sortable({
items: ".moveDvi", // 仅允许 .moveDvi 元素被拖拽
connectWith: ".sortableContainer", // 容器间可互连拖放（实现跨层排序）
placeholder: "placeHolder", // 拖拽占位符样式类
tolerance: "pointer", // 提升嵌套区域的拖放灵敏度（推荐添加）
handle: ".moveDvi" // 可选：限制仅通过该元素触发拖拽（增强体验）
});配套 CSS（确保视觉反馈与缩进逻辑）：
.lay01 { margin-left: 15px; }
.placeHolder {
border: 1px dashed #e09d9d;
height: 20px;
margin: 2px 0;
background-color: #fff9f9;
}⚠️ 重要注意事项：
- 必须引入 jQuery + jQuery UI 双库（顺序不可颠倒），且版本需兼容（示例使用 jQuery 1.12.4 + jQuery UI 1.12.1）；
- connectWith 的值应为容器选择器（如 ".sortableContainer"），而非单个条目类名；
- 若需禁止某层容器接收外部拖入项，可为其添加 disabled: true 或动态控制 cancel 选项；
- 嵌套过深时建议添加 tolerance: "pointer" 避免因 intersect 模式导致的误判。
通过以上配置，即可实现任意深度嵌套容器间的双向拖拽排序，结构语义清晰、行为稳定可靠。
