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

jQuery UI Sortable 嵌套排序失效的解决方案

本文详解 jquery ui sortable 在嵌套结构中无法正常拖拽排序的常见原因（如拼写错误、初始化对象错误），并提供可运行的修复代码与最佳实践。

本文详解 jquery ui sortable 在嵌套结构中无法正常拖拽排序的常见原因（如拼写错误、初始化对象错误），并提供可运行的修复代码与最佳实践。

jQuery UI 的 sortable() 方法常被用于实现拖拽排序功能，但在处理嵌套容器（如多层 .noMove 包裹 .moveDvi）时，若初始化方式不当，极易出现“拖不动”“连接失效”或“占位符不显示”等问题。核心问题往往源于两个关键点：

1. 拼写错误：connectwith → connectWith

jQuery UI API 中的选项名严格区分大小写，connectWith 是唯一合法写法。将 connectwith（小写 w）误写为驼峰形式以外的变体，会导致该配置被完全忽略，从而无法建立容器间连接。

2. 初始化目标错误：应作用于容器，而非拖拽项

原代码对所有 .moveDvi 元素调用 sortable()，这是根本性错误——.moveDvi 是待排序的子项（items），而 sortable 必须绑定在父容器（即 .noMove 或其语义化替代类）上。只有容器具备接收拖拽、管理 placeholder、协调 connectWith 连接等能力。

jQuery 1.12.4

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

下载

✅ 正确做法是：

为每一级可排序容器统一添加语义化类（如 .sortableContainer）；
使用 items: ".moveDvi" 明确指定可拖拽子元素；
设置 connectWith: ".sortableContainer"，使所有同类容器形成可互通的排序组；
确保引入完整依赖：jQuery + jQuery UI CSS + jQuery UI JS（顺序不可颠倒）。

以下是修复后的完整示例（含样式与结构优化）：



  <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>
    .sortableContainer { margin-left: 15px; }
    .moveDvi {
      padding: 8px 12px;
      background: #f0f8ff;
      border: 1px solid #b0d4ff;
      margin: 4px 0;
      cursor: move;
    }
    .placeHolder {
      height: 24px;
      border: 2px dashed #a3c2e6;
      background-color: #eef7ff;
      margin: 4px 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",   // 可选：限定拖拽手柄（此处整个元素均可拖）
      forcePlaceholderSize: true
    });
    // 禁用嵌套容器内子项的默认点击行为干扰
    $(".moveDvi").disableSelection();
  });
</script>