javascript - jQuery UI 可拖动网格

Question

好的，我要创建的是：适合表格单元格（.slot div）的可拖动元素。这是我的 jQuery UI 代码的简化版本：

<style>

.draggable, .cell  {
    width: 100px; height: 100px;
}

.cell {
    background: #F00;
}

</style>

<script type="text/javascript">

$(function() {
        $( ".draggable" ).draggable({ 
            distance: 20, 
            containment: "#container", 
            snap: ".slot", 
            snapMode: "inner", 
            snapTolerance: 10, 
        });
    });

</script>

<table id=”container”&gt;
<tr>
    <td class=”cell”&gt; <div class=”slot”&gt; <div class=”draggable”&gt;</div> </div> </td>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
</tr>
<tr>
    <td class=”cell”&gt; <div class=”slot”&gt; <div class=”draggable”&gt;</div> </div> </td>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
</tr>
<tr>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
    <td class=”cell”&gt; <div class=”slot”&gt;</div> </td>
</tr>
</table>

从现在开始，我可以在单元格（.slot）周围移动它们，但我无法实现两件事：

1. 仅将可拖动元素放入“.slot”中（删除放弃单元格中拖动元素的选项）。基本上，当您放下拖动的元素时，它会进入最近的单元格或覆盖最多的单元格。
2. 限制将两个可拖动对象放在一个单元格 (.slot) 中。

任何建议或帮助表示赞赏！

在此先感谢，乔治

Answer 1

尝试使用jQuery UI Sortable而不是Draggable。您可能需要在您的情况下使用可排序连接列表。