本文详解如何使用 jQuery UI 实现多个 .dragDiv 元素在同一表格单元格中自由拖放（支持多元素共存），修正原代码中“仅允许单元素放置”的限制，并通过 CSS Flex 布局确保居中对齐与视觉一致性。
本文详解如何使用 jquery ui 实现多个 `.dragdiv` 元素在同一表格单元格中自由拖放（支持多元素共存），修正原代码中“仅允许单元素放置”的限制，并通过 css flex 布局确保居中对齐与视觉一致性。
在默认的 jQuery UI 拖拽逻辑中，.droppable() 的 accept 选项若使用函数形式（如 accept: function() { return $(this).find("*").length == 0; }），会强制目标单元格为空才能接收拖拽元素——这直接阻碍了“多个 div 同时放入同一单元格”的需求。要实现真正的多元素协同拖放（即允许多个 .dragDiv 被独立拖入、并存于同一 <td> 中），关键在于两点重构：<h3>✅ 1. 修改 <code>accept 规则：从“空单元格校验”改为“类名匹配”
将 accept 由动态函数改为静态选择器 ".dragDiv"，使所有带该类的元素均可被任意 <td> 接收，不再检查目标是否为空：<pre class="brush:php;toolbar:false;">$(".mainTable tr td").droppable({
accept: ".dragDiv", // ✅ 允许任何 .dragDiv 进入（无论目标是否已有子元素）
drop: function(event, ui) {
const $target = $(this);
ui.draggable.position({
my: "center",
at: "center",
of: $target,
using: function(pos) {
$(this).animate(pos, 100, "easeOutBack");
}
});
}
});</pre>
<blockquote><p>⚠️ 注意：无需手动 <code>append() —— jQuery UI 默认会在 drop 时自动将拖拽元素追加到目标容器内。显式调用 append() 反而可能引发重复插入或定位错乱。
✅ 2. 优化 CSS：用 Flexbox 替代绝对定位，保障多元素居中与堆叠
原 CSS 中 .dragDiv 使用 position: relative + margin: auto 无法在多元素场景下保持居中。改用 Flexbox 容器布局，让每个 <td> 成为弹性容器，内部元素自然垂直/水平居中：<pre class="brush:php;toolbar:false;">.mainTable tr {
display: flex;
}
.mainTable tr td {
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
border: 1px solid #ccc; /* 可选：增强单元格可视边界 */
}
.dragDiv {
background-color: #00ABA9;
height: 50px;
width: 80%; /* 避免过宽导致拥挤 */
border-radius: 4px; /* 提升视觉友好度 */
}</pre>
<h3>✅ 完整可运行示例（精简版）</h3>
<pre class="brush:php;toolbar:false;">
<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>
/* 上述优化后的 CSS */
</style></pre>
<table class="mainTable">
<tr>
<td id="11"><div class="dragDiv" id="1"></div></td>
<td id="12"><div class="dragDiv" id="2"></div></td>
<td id="13"></td>
</tr>
<tr>
<td id="21"></td>
<td id="22"></td>
<td id="23"></td>
</tr>
<tr>
<td id="31"></td>
<td id="32"></td>
<td id="33"></td>
</tr>
</table>
<script>
$(function() {
$(".dragDiv").draggable({ revert: 'invalid' });
$(".mainTable tr td").droppable({
accept: ".dragDiv",
drop: function(event, ui) {
ui.draggable.position({
my: "center", at: "center", of: $(this),
using: function(pos) { $(this).animate(pos, 100, "easeOutBack"); }
});
}
});
});
</script><h3>? 补充说明与进阶建议</h3>
<ul><li>
<strong>无冲突拖拽</strong>：每个 <code>.dragDiv 独立拖拽，互不影响；同一 <td> 可容纳任意数量元素（浏览器性能范围内）。<li>
<strong>视觉反馈增强</strong>：可为 <code>:hover 状态添加背景色变化，或在 over/out 事件中高亮目标单元格。
drop 回调中读取 ui.draggable.attr('id') 和 $target.attr('id')，构建映射关系。通过以上改造，你即可在 3×3 表格中自由拖放多个 div，并支持任意单元格内的多元素共存——真正实现灵活、直观、可扩展的拖拽交互体验。
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
