jQuery UI Sortable: no permitir la transferencia a elementos secundarios

Question

Estoy trabajando con los ordenables de la interfaz de usuario de jQuery y he creado un sistema de divs en este formato;

<div class='mainDiv'>
    <label>text: <input type='text' name='textbox' /></label>

    <div class='children'>
        <div class='mainDiv'>...</div>
        <div class='mainDiv'>...</div>
        <div class='mainDiv'>
            <label>text: <input type='text' name='textbox' /></label>
            <div class='children'>...</div>
        </div>
    </div>
</div>

Los divs pueden tener un número infinito de hijos, y quiero poder arrastrar y soltar todos los .mainDiv dentro de su caja principal, así que he usado esto:

$(".mainDiv").parent().sortable({items: ".mainDiv", containment: "parent"});

Sin embargo, esto permite que los elementos se arrastren a sus divs hijos o hermanos .children. lo cual no quiero que suceda Quiero restringir los elementos para que permanezcan dentro de sus padres.

Cualquier ayuda aquí sería importante.

Saludos

Answer 1

Logré resolverlo así:

$(this).parent().sortable({
    items: '> li',
    axis: 'y',
    ...
});

En su caso, debería funcionar con:

items: '> .mainDiv'

contención: " parent " no es obligatorio.

En mi caso, habilito "ordenable" durante un evento de clic anterior, ya que es más rápido. Creo que es más fácil si lo unes al mousedown " evento. Si crea el árbol dinámicamente (por ejemplo, Ajax), le recomiendo que use '' livequery ''.