本文详解 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 模式导致的误判。

通过以上配置，即可实现任意深度嵌套容器间的双向拖拽排序，结构语义清晰、行为稳定可靠。