jQuery Sortable 嵌套排序失效的常见原因与正确实现方案-html教程-PHP中文网

jQuery UI Sortable 嵌套排序失败，通常因属性名拼写错误（如 connectwith 应为 connectWith）、初始化对象选择错误（对可拖拽项而非容器调用 .sortable()）或缺少必要依赖导致；本文详解修复步骤与嵌套结构的最佳实践。

jquery ui sortable 嵌套排序失败，通常因属性名拼写错误（如 `connectwith` 应为 `connectwith`）、初始化对象选择错误（对可拖拽项而非容器调用 `.sortable()`）或缺少必要依赖导致；本文详解修复步骤与嵌套结构的最佳实践。

在使用 jQuery UI Sortable 实现嵌套可排序结构时，一个看似微小的拼写错误就足以导致功能完全失效。最常见的错误是将配置项 connectWith 误写为 connectwith（驼峰命名被破坏），而 jQuery UI 对该选项名严格区分大小写——错误拼写会导致连接逻辑被忽略，拖拽项无法跨容器移动。

更重要的是初始化对象的选择：.sortable() 必须绑定在可容纳子项的容器元素上（如 div.sortableContainer），而非被拖拽的子项本身（如 div.moveDvi）。这是因为 Sortable 的核心机制依赖于容器的 items 配置来识别有效拖拽项，并通过 connectWith 指定哪些同类容器可相互接收拖入项。若错误地对 .moveDvi 调用 .sortable()，插件会尝试将每个

当作独立列表处理，从而破坏嵌套层级关系与连接逻辑。

以下是经过验证的正确实现方式：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载



  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><style>
    .lay01 { margin-left: 15px; }
    .placeHolder {
      border: 1px dashed #e09d9d;
      height: 24px;
      background-color: #fff9f9;
      margin: 2px 0;
    }
  </style><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>

<script>
  $(function() {
    $(".sortableContainer").sortable({
      items: ".moveDvi",           // 明确指定可拖拽子项选择器
      connectWith: ".sortableContainer", // 正确拼写，指向同类容器
      placeholder: "placeHolder",
      tolerance: "pointer",        // 提升嵌套场景下的拖放精度
      handle: ".moveDvi"             // 可选：限制仅通过该元素触发拖拽（增强体验）
    });
  });
</script>

✅ 关键要点总结：