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在你的情况下。