本文详解如何使用 jQuery UI 实现多个 .dragDiv 元素同时拖拽、互不排斥地放入同一表格单元格（td）中，关键在于修正 droppable 的 accept 规则与优化 CSS 布局逻辑。
本文详解如何使用 jquery ui 实现多个 `.dragdiv` 元素同时拖拽、互不排斥地放入同一表格单元格（td）中，关键在于修正 `droppable` 的 `accept` 规则与优化 css 布局逻辑。
默认情况下，jQuery UI 的 droppable 组件在 accept 选项中若使用函数返回 $(this).find("*").length === 0，会强制限制目标单元格必须为空才能接收拖拽元素——这直接导致无法将第二个 .dragDiv 拖入已含一个元素的 <td> 中。要支持<strong>多元素共存式拖放</strong>，核心改造有两点：<ol>
<li>
<strong>放宽接受条件</strong>：将 <code>accept 显式设为选择器 ".dragDiv"，而非依赖空容器判断；
vertical-align 和 margin: auto，确保多个子元素在单元格内自动居中堆叠或流式排列。以下是完整可运行的解决方案：
<meta charset="utf-8"><title>Multi-Drag in Table</title><script src="https://code.jquery.com/jquery-3.6.0.js"></script><script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script><style>
.mainTable {
margin: 20px auto;
border-collapse: collapse;
}
.mainTable tr {
display: flex;
}
.mainTable tr td {
width: 100px;
height: 100px;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 4px;
box-sizing: border-box;
}
.dragDiv {
background-color: #00ABA9;
width: 80%;
height: 40px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.15s;
}
.dragDiv:hover {
transform: scale(1.05);
}
</style>
✅ 关键要点总结：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
-
accept: ".dragDiv"是实现多元素共存拖放的必要前提，它让 droppable 主动声明“我接受这类元素”，而非被动拒绝非空容器； - 使用
flexbox（display: flex + justify-content/align-items: center）替代旧式居中方案，天然支持多子元素垂直居中堆叠； -
helper: "clone"可提升交互体验（拖拽时保留原元素），适合需要复制操作的场景； -
if ($target.has($draggable).length === 0)避免同一元素被重复追加，增强健壮性； - 动画
using回调中应确保position属性重置（如position: static），否则绝对定位残留会导致后续布局错乱。
该方案已在现代浏览器中充分验证，兼容 jQuery UI 1.13+，适用于九宫格布局、看板系统、可视化编排等需要灵活元素组合的交互场景。
