jQuery UI Sortable - não permitindo transferência para elementos filhos

Question

Eu estou trabalhando com sortables UI do jQuery e ter criado um sistema de divs neste 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>

Os divs pode ter um número infinito de crianças, e eu quero ser capaz de arrastar e soltar todo o .mainDiv de dentro de sua caixa pai, então eu usei o seguinte:

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

No entanto, isso permite que os elementos para ser arrastado para o seu filho ou irmão divs .children. que eu não quero que aconteça. Eu quero restringir elementos para ficar dentro de seu pai.

Qualquer ajuda aqui seria quente.

Felicidades

Answer 1

Eu consegui resolvê-lo como este:

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

No seu caso, ele deve funcionar com:

items: '> .mainDiv'

contenção:. "Pai" Não é necessário

No meu caso, eu permitir "classificáveis" durante um evento de clique anterior, uma vez que é mais rápido. Eu acho que é mais fácil se você ligá-la para o evento "mousedown". Se você criar a árvore dinamicamente (e.g.Ajax), eu recomendo que você use "livequery".