本文详解如何使用 jQuery UI 实现多个 .dragDiv 元素在同一表格单元格中自由拖拽、叠加放置，突破单格仅容一元素的限制，并提供可运行的优化代码与关键配置说明。
本文详解如何使用 jquery ui 实现多个 `.dragdiv` 元素在同一表格单元格中自由拖拽、叠加放置，突破单格仅容一元素的限制，并提供可运行的优化代码与关键配置说明。
在默认的 jQuery UI 拖拽（draggable）与投放（droppable）逻辑中，若未显式配置 accept 规则，droppable 区域通常会拒绝已含子元素的目标（尤其当使用 revert: 'invalid' 时）。你原代码中通过 accept: function() { return $(this).find("*").length == 0; } 强制要求目标单元格为空——这直接导致“无法同时放置两个 div”的核心问题。
要支持多元素共存于同一 <td>，关键在于两处重构：<ol>
<li>
<strong>放宽 <code>droppable.accept 条件：不再检查单元格是否为空，而是明确接受所有 .dragDiv 元素；
append() 手动插入逻辑：原代码中 $(this).append(ui.draggable) 会强行将元素追加为子节点，干扰定位；而 position() 已能精准居中，无需手动 DOM 移动。以下是生产就绪的优化实现：
<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;
align-items: center;
justify-content: center;
position: relative; /* 支持绝对定位子元素 */
overflow: visible; /* 确保重叠元素可见 */
}
.dragDiv {
background-color: #00ABA9;
width: 80px;
height: 40px;
border-radius: 4px;
cursor: move;
box-shadow: 0 2px 4px 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等老旧浏览器的项目。
- ✅ 叠加原理：因未调用
append()，所有.dragDiv均保持原始 DOM 位置（如在底层），仅通过 CSSposition: absolute+top/left动态调整视觉坐标。这天然支持无限叠加，且互不干扰。 - ⚠️ z-index 管理：若需控制叠加顺序（如后拖入者置顶），可在
drop回调中动态设置ui.draggable.css('z-index', ++globalZIndex)。 - ? 防误操作：可为
droppable添加tolerance: 'pointer'，提升小尺寸元素的投放精度。 - ? 响应式适配：
flex布局配合align-items/justify-content已保障居中鲁棒性；若需适配移动端，建议补充touch-action: none并引入jquery-ui-touch-punch插件。
通过以上改造，你即可在 3×3 表格中任意单元格内自由拖放、叠加多个可拖拽区块——真正实现“多元素同步操作”的交互目标。
