jQuery Sortable 嵌套排序失效的完整解决方案-html教程-PHP中文网

jQuery UI Sortable 嵌套排序失败，通常源于初始化对象错误、拼写错误（如 connectwith → connectWith）或未正确指定容器级可连接目标。本文详解正确用法、结构规范与关键配置。

jquery ui sortable 嵌套排序失败，通常源于初始化对象错误、拼写错误（如 `connectwith` → `connectwith`）或未正确指定容器级可连接目标。本文详解正确用法、结构规范与关键配置。

要实现嵌套层级的拖拽排序（如多层

中的子项可跨层级交换），不能对可拖拽项（.moveDvi）调用 .sortable()，而应对其父容器（即可容纳拖拽项的“列表”）初始化 Sortable。这是 jQuery UI Sortable 的核心设计原则：sortable() 作用于容器元素，而非待排序的子项。

首先，修正关键拼写错误：connectwith 是无效选项，正确写法为 connectWith（注意大小写）。该选项用于声明哪些同类容器之间允许拖拽连接，值应为选择器字符串（如 ".sortableContainer"），指向其他支持排序的容器，而非单个条目。

其次，HTML 结构需明确区分「容器」与「可拖项」：

jQuery 1.12.4

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

下载

所有可接受拖拽项的父级元素统一添加类名（如 .sortableContainer）；
可拖拽项自身保留语义类（如 .moveDvi），但不直接初始化 sortable；
嵌套容器必须逐层标记，确保每层都具备排序能力。

以下是推荐的结构与初始化代码：

<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>

$(".sortableContainer").sortable({
  items: ".moveDvi",           // 指定哪些子元素可被拖拽（必需！）
  connectWith: ".sortableContainer", // 允许所有 .sortableContainer 之间互连
  placeholder: "placeHolder",  // 拖拽时占位样式类
  tolerance: "pointer",        // 推荐设为 pointer，提升嵌套区域识别精度
  handle: ".moveDvi",          // （可选）限定拖拽手柄，避免误触发
  forcePlaceholderSize: true   // 确保 placeholder 占据合理空间
});

⚠️ 注意事项：