Question

好的，我想要创建的是：可拖动的元素，适合表格单元格（.slot divs）。以下是使用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），但我无法实现两件事：

仅在“.slot”中安装draggables（删除在单元格中放弃拖动元素的选项）。基本上当你放下被拖动的元素时，它会进入最近的单元格或覆盖最多的单元格。
限制在一个单元格中放置两个可拖动的（.slot）。

感谢任何建议或帮助！

提前致谢，乔治

Answer 1

尝试使用jQuery UI Sortable代替Draggable。您可能需要在案例中使用Sortable-Connected Lists。

jQuery UI可拖动网格

1 个答案: