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

<code>$(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>
</code>

Naprawdę walczę z tym, dzięki wszystkim!

questionAnswers(1)

yourAnswerToTheQuestion