本文详解如何使用 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，确保多个子元素在单元格内自动居中堆叠或流式排列。以下是完整可运行的解决方案：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<table class="mainTable">
<tr>
<td id="11"><div class="dragDiv" id="d1"></div></td>
<td id="12"><div class="dragDiv" id="d2"></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",
helper: "clone", // 可选：启用克隆拖拽，避免原位消失
cursor: "move",
zIndex: 1000
});
$(".mainTable tr td").droppable({
accept: ".dragDiv", // ✅ 关键：允许任意 dragDiv 进入（不再检查是否为空）
hoverClass: "drop-hover", // 可视化悬停反馈
drop: function(event, ui) {
const $target = $(this);
const $draggable = ui.draggable;
// 防止重复追加同一元素（如多次拖入）
if ($target.has($draggable).length === 0) {
$target.append($draggable.css({ position: "static", top: "auto", left: "auto" }));
// 居中动画（仅对首次插入生效，避免重复动画冲突）
$draggable.position({
my: "center",
at: "center",
of: $target,
using: function(pos) {
$(this).animate(pos, 120, "easeOutQuad");
}
});
}
}
});
// 可选：为 droppable 添加悬停样式
$("<style>.drop-hover { background-color: #f0f8ff !important; }</style>").appendTo("head");
});
</script>
</body>
</html>✅ 关键要点总结：
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+，适用于九宫格布局、看板系统、可视化编排等需要灵活元素组合的交互场景。
