Interfaccia utente jQuery ordinabile: non consente il trasferimento in elementi figlio

Question

Sto lavorando con i tipi UI di jQuery e ho creato un sistema di div in questo 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>

I div possono avere un numero infinito di figli e voglio essere in grado di trascinare tutti i .mainDiv nella loro casella genitore, quindi ho usato questo:

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

Tuttavia, ciò consente di trascinare gli elementi nei loro div .children. che non voglio succedere. Voglio limitare gli elementi a rimanere all'interno dei loro genitori.

Qualsiasi aiuto qui sarebbe caldo.

Saluti

Answer 1

Sono riuscito a risolverlo in questo modo:

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

Nel tuo caso, dovrebbe funzionare con:

items: '> .mainDiv'

contenimento: " parent " non è richiesto.

Nel mio caso, abilito " ordinabile " durante un evento di clic precedente, poiché è più veloce. Penso che sia più facile se lo leghi al "mousedown" evento. Se crei l'albero in modo dinamico (ad es. Ajax), ti consiglio di utilizzare " livequery " ;.