jQuery można sortować za pomocą droppable
Moje skrzypce:http://jsfiddle.net/Yc9WY/42/
Tutaj zobaczysz dwie grupy, każda z 3 zdefiniowanymi pojemnikami z możliwością opuszczania. Możesz przenosić wydarzenia z grupy 1 do grupy 2 i do dowolnego miejsca. To działa dobrze.
Gdy grupa jest pełna, chciałbym dać użytkownikowi możliwość sortowania tej grupy, przesuwając zdarzenia w górę iw dół. Powinni jednak być w stanie przenieść wydarzenie poza grupę, jeśli jednak zdecydują.
Zobaczysz mój skomentowany kod, w którym zacząłem integrować sortowalną bibliotekę, ale zachowuję się dziwnie.
Uwaga: Nie mogę zastąpić mojego draggable / dropable wyłącznie sortowalnym. Potrzebuję wyraźnie zdefiniowanych obszarów, które można porzucić (3 na grupę), aby wydarzenie mogło istnieć w slocie 1 i 3 grupy 1.
Oto mój kod
$(document).ready(function() {
// $(".sort").sortable({
// revert: true
// });
$(".drag").draggable({
//connectToSortable: ".sort",
revert: true
//helper: clone
});
$(".sort").droppable({
drop: function(event, ui) {
if (!($(this).children(".drag").size() == 1)) {
$(this).append(ui.draggable);
ui.draggable.css({
left: 0,
top: 0
});
}
}
});
});
<div>Group 1:
<ul class="parent">
<li class="sort"><a href="" class="drag">event 1</a></li>
<li class="sort"><a href="" class="drag">event 2</a></li>
<li class="sort"></li>
</ul>
</div>
<div>
Group 2
<ul class="parent">
<li class="sort"></li>
<li class="sort"><a href="" class="drag">event 3</a></li>
<li class="sort"><a href="" class="drag">event 4</a></li>
</ul>
</div>
Naprawdę walczę z tym, dzięki wszystkim!