要允许您的盒子容纳多个元素，您需要更改接受子句以允许任何具有
.dragDiv正如您在所附的代码片段中所看到的，现在可以在同一个框中放置两个元素。
（我还添加了一些 Flexbox 样式并删除了一些不需要的样式来清理 CSS，同时保持元素在容器内居中）。
$(function() {
$(".dragDiv").draggable({
revert: 'invalid'
});
$(".mainTable tr td").droppable({
accept: ".dragDiv",
drop: function(event, ui) {
var $this = $(this);
ui.draggable.position({
my: "center",
at: "center",
of: $this,
using: function(pos) {
$(this).animate(pos, 100, "easeOutBack");
}
});
}
});
});.mainTable {
margin: 20px auto;
padding: 0px;
}
.mainTable tr {
display: flex;
flex-flow: row;
}
.mainTable tr td {
width: 100px;
height: 100px;
display: flex;
flex-flow: column;
justify-content: center;
}
.dragDiv {
background-color: #00ABA9;
height: 50px;
width: 100%;
}<html>
<head>
<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>
</head>
<body>
<table border="1" 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>
</body>
</html>