Meu violino:http://jsfiddle.net/Yc9WY/42/

O que você verá aqui são dois grupos, cada um com três contêineres dropáveis ​​definidos. Você pode mover eventos do grupo 1 para o grupo 2 e em qualquer slot. Isso funciona muito bem.

Quando um grupo estiver cheio, gostaria de dar ao usuário a capacidade de classificar esse grupo movendo os eventos para cima e para baixo. Eles ainda devem poder mover o evento para fora do grupo, se assim escolherem.

Você verá meu código comentado, onde comecei a integrar a biblioteca classificável, mas estou tendo um comportamento estranho.

Nota: Eu não posso substituir o meu draggable / dropable com classificável apenas. Preciso de áreas explicitamente definidas como droppable (3 por grupo) para que um evento possa existir no slot 1 e 3 do grupo 1.

Aqui está meu código

<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>

Estou realmente lutando com isso, obrigado a todos!