本文详解如何使用 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;">$(&quot;.mainTable tr td&quot;).droppable({ accept: &quot;.dragDiv&quot;, // ✅ 允许任何 .dragDiv 进入（无论目标是否已有子元素） drop: function(event, ui) { const $target = $(this); ui.draggable.position({ my: &quot;center&quot;, at: &quot;center&quot;, of: $target, using: function(pos) { $(this).animate(pos, 100, &quot;easeOutBack&quot;); } }); } });</pre><blockquote><p>⚠️ 注意：无需手动 <code>append() —— jQuery UI 默认会在 drop 时自动将拖拽元素追加到目标容器内。显式调用 append() 反而可能引发重复插入或定位错乱。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

✅ 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;">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;https://code.jquery.com/ui/1.13.2/jquery-ui.js&quot;&gt;&lt;/script&gt; &lt;style&gt; /* 上述优化后的 CSS */ &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table class=&quot;mainTable&quot;&gt; &lt;tr&gt; &lt;td id=&quot;11&quot;&gt;&lt;div class=&quot;dragDiv&quot; id=&quot;1&quot;&gt;&lt;/div&gt;&lt;/td&gt; &lt;td id=&quot;12&quot;&gt;&lt;div class=&quot;dragDiv&quot; id=&quot;2&quot;&gt;&lt;/div&gt;&lt;/td&gt; &lt;td id=&quot;13&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id=&quot;21&quot;&gt;&lt;/td&gt; &lt;td id=&quot;22&quot;&gt;&lt;/td&gt; &lt;td id=&quot;23&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id=&quot;31&quot;&gt;&lt;/td&gt; &lt;td id=&quot;32&quot;&gt;&lt;/td&gt; &lt;td id=&quot;33&quot;&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script&gt; $(function() { $(&quot;.dragDiv&quot;).draggable({ revert: 'invalid' }); $(&quot;.mainTable tr td&quot;).droppable({ accept: &quot;.dragDiv&quot;, drop: function(event, ui) { ui.draggable.position({ my: &quot;center&quot;, at: &quot;center&quot;, of: $(this), using: function(pos) { $(this).animate(pos, 100, &quot;easeOutBack&quot;); } }); } }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h3>? 补充说明与进阶建议</h3> <ul><li> <strong>无冲突拖拽</strong>：每个 <code>.dragDiv 独立拖拽，互不影响；同一 <td> 可容纳任意数量元素（浏览器性能范围内）。<li> <strong>视觉反馈增强</strong>：可为 <code>:hover 状态添加背景色变化，或在 over/out 事件中高亮目标单元格。

数据绑定扩展：若需记录元素位置，可在 drop 回调中读取 ui.draggable.attr('id') 和 $target.attr('id')，构建映射关系。

移动端兼容性：jQuery UI 默认不支持触摸事件，如需移动端支持，建议集成 jQuery UI Touch Punch 插件。

通过以上改造，你即可在 3×3 表格中自由拖放多个 div，并支持任意单元格内的多元素共存——真正实现灵活、直观、可扩展的拖拽交互体验。