jQuery UI sortierbaren - Verbieten Transfer in untergeordneten Elemente

Question

Ich arbeite mit jQuery UI sortables und haben ein System von divs in diesem Format erstellt;

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

Die divs kann eine unendliche Anzahl von Kindern haben, und ich möchte in der Lage sein, alle der .mainDiv die innerhalb ihrer übergeordneten Box per Drag & Drop, so habe ich diese verwendet:

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

Dies ist jedoch erlaubt Elemente gezogen in ihre Kinder oder Geschwister .children divs werden. die ich will nicht passieren. Ich möchte Elemente beschränken innerhalb ihrer Eltern zu bleiben.

Jede Hilfe wäre hier heiß.

Prost

Answer 1

schaffte ich es wie folgt zu lösen:

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

In Ihrem Fall, sollte es mit der Arbeit:

items: '> .mainDiv'

Containment. "Eltern" ist nicht erforderlich

In meinem Fall aktiviere ich „sortierbar“ während eines vorherigen Click-Ereignis, da es schneller ist. Ich denke, die leichter, wenn man es auf das „mousedown-“ Ereignis binden. Wenn Sie den Baum dynamisch erstellen (e.g.Ajax), empfehle ich Ihnen „livequery“ zu verwenden.