JQuery Sortable 功能异常：嵌套DIV排序功能无法实现求助

问题分析 #

你的代码存在几个关键问题导致Sortable功能失效：

• connectwith拼写错误，jQuery UI Sortable的正确属性名是驼峰式的connectWith
• 错误地将可拖动元素（.moveDvi）设置为Sortable容器，正确逻辑是把包含可拖动项的父容器设为Sortable，再指定容器内的可排序元素
• 未明确界定可排序的目标元素，导致嵌套结构下的排序逻辑混乱

修复后的代码 #

HTML（层级结构可保留，新增统一容器类名）

<div class="sortContainer noDvi lay01">
  <div class="moveDvi">
    test 01
  </div>
  <div class="sortContainer noMove lay01">
    <div class="moveDvi">
      test 02
    </div>
    <div class="sortContainer noMove lay01">
      <div class="moveDvi">
        test 03
      </div>
      <div class="sortContainer noMove lay01">
        <div class="moveDvi">
          test 04
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

$(".sortContainer").sortable({
  connectWith: ".sortContainer", // 修正拼写，实现容器间的元素互通拖动
  items: ".moveDvi", // 指定容器内可排序的目标元素
  placeholder: "placeHolder",
  containment: "document" // 可选：限制拖动范围在文档内
}).disableSelection();

必要CSS（用于显示占位符和优化交互）

.placeHolder {
  border: 2px dashed #ccc;
  height: 40px;
  margin: 5px 0;
}
.moveDvi {
  padding: 10px;
  background: #f5f5f5;
  margin: 5px 0;
  cursor: move;
}
.sortContainer {
  padding-left: 20px;
  margin: 5px 0;
}

关键说明 #

1. 给所有包含可排序项的父容器添加统一类名sortContainer，简化选择器定位
2. 通过items属性明确指定容器内哪些元素允许被排序
3. 修正connectWith的拼写错误，确保不同嵌套容器间的元素可以互相拖动
4. 调用disableSelection()避免拖动时选中文本，提升交互流畅度
5. 占位符CSS用于拖动时显示位置提示，增强用户感知

内容的提问来源于stack exchange，提问作者James