jQuery UI draggable grid

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), но я не могу достигнуть двух вещей:

1. Fit перетаскивается только в «.slot» (удаляет возможность отказаться от перетаскиваемого элемента среди ячеек). В основном, когда вы отбрасываете перетаскиваемый элемент, он идет в ближайшую ячейку или ту, которая покрывает большинство.
2. Ограничить перенос двух перетаскиваемых объектов в одну ячейку (.slot).

Любые предложения или помощь приветствуются!

Спасибо заранее, Джордж

Answer 1

Попробуйте использовать jQuery UI Sortable вместо Draggable. Возможно, вам понадобится использовать Sortable-Connected Lists в вашем случае.