验证每个容器仅含单个元素的拖拽功能优化需求

阿华AIGC实验室

2026-5-9

问题分析与解决方案

首先得指出一个关键问题：你的HTML代码里重复使用了sortable1和sortable2这两个ID，而ID在HTML文档中必须是唯一的，重复的ID会直接导致选择器逻辑混乱，这也是你当前出现全局禁用拖拽问题的核心根源之一。我们需要先修正这个问题，改用class来标识同类容器。

接下来针对你的核心需求——让每个容器单独判断是否已有元素，仅禁用已有元素的目标容器的拖拽操作，不影响其他容器——下面是完整的修正实现：

完整代码实现

HTML

<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>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- 源容器区域 -->
<div class="col-md-5">
  <div class="col-md-12">
    <ul class="source-container connectedSortable">
      <li class="ui-state-default">Item 1</li>
    </ul>
  </div><br />
  <div class="col-md-12">
    <ul class="source-container connectedSortable">
      <li class="ui-state-default">Item 2</li>
    </ul>
  </div><br />
  <div class="col-md-12">
    <ul class="source-container connectedSortable">
      <li class="ui-state-default">Item 3</li>
    </ul>
  </div><br />
  <div class="col-md-12">
    <ul class="source-container connectedSortable">
      <li class="ui-state-default">Item 4</li>
    </ul>
  </div><br />
  <div class="col-md-12">
    <ul class="source-container connectedSortable">
      <li class="ui-state-default">Item 5</li>
    </ul>
  </div><br />
</div>

<!-- 目标容器区域 -->
<div class="col-md-5">
  <div class="col-md-12">
    <ul class="target-container connectedSortable">
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="target-container connectedSortable">
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="target-container connectedSortable">
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="target-container connectedSortable">
    </ul>
  </div>
  <div class="col-md-12">
    <ul class="target-container connectedSortable">
    </ul>
  </div>
</div>

CSS

.source-container, .target-container {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

.source-container li, .target-container li {
  margin: 0 15px 15px 15px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
  display: block;
  text-align: center;
  float: left;
}

JavaScript

$(function () {
  $(".source-container, .target-container").sortable({
    connectWith: ".connectedSortable",
    stop: function (event, ui) {
      // 获取当前拖拽元素所在的目标容器
      const targetContainer = ui.item.parent();
      // 判断该容器内的li数量是否超过1（每个容器最多容纳1个元素）
      if (targetContainer.find('li').length > 1) {
        $(this).sortable("cancel");
      }
    },
  }).disableSelection();
});

关键改动说明

修正HTML结构问题：把重复的sortable1和sortable2ID替换为source-container和target-container类，确保DOM结构符合规范，彻底解决选择器混淆的问题。
实现容器独立判断：在stop事件中，不再使用全局选择器$('ul#sortable2 li')，而是通过ui.item.parent()精准获取当前拖拽元素的目标容器，只判断该容器内的li数量。这样每个容器的判断逻辑都是独立的，不会影响其他容器的拖拽功能。
严格控制单元素限制：当目标容器内的li数量超过1时，调用sortable("cancel")取消本次拖拽，确保每个容器同一时间只能容纳一个元素，完全符合你的需求。