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”>
<tr>
    <td class=”cell”> <div class=”slot”> <div class=”draggable”></div> </div> </td>
    <td class=”cell”> <div class=”slot”></div> </td>
</tr>
<tr>
    <td class=”cell”> <div class=”slot”> <div class=”draggable”></div> </div> </td>
    <td class=”cell”> <div class=”slot”></div> </td>
</tr>
<tr>
    <td class=”cell”> <div class=”slot”></div> </td>
    <td class=”cell”> <div class=”slot”></div> </td>
</tr>
</table>

现在我可以在单元格(.slot)周围移动它们，但我无法实现两件事:

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

如有任何建议或帮助，我们将不胜感激!

提前致谢，乔治

Answer 1

尝试使用jQuery UI Sortable而不是Draggable 。您可能需要使用Sortable-Connected Lists在你的情况下。