Mi violínhttp://jsfiddle.net/Yc9WY/42/

Lo que verá aquí son dos grupos, cada uno de ellos con 3 contenedores extraíbles definidos. Puede mover eventos del grupo 1 al grupo 2, y en cualquier ranura. Esto funciona bien.

Una vez que un grupo está lleno, me gustaría darle al usuario la posibilidad de clasificar ese grupo moviendo los eventos hacia arriba y hacia abajo. Aún así, deberían poder mover el evento fuera del grupo si así lo desean.

Verá mi código comentado donde comencé a integrar la biblioteca clasificable, pero estoy teniendo un comportamiento extraño.

Nota: No puedo reemplazar mi arrastre / dropable con sortable únicamente. Necesito áreas sueltas definidas explícitamente (3 por grupo) para que pueda existir un evento en las ranuras 1 y 3 del grupo 1.

Aquí está mi 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>

Estoy realmente luchando con esto, gracias a todos!