Сортируемый пользовательский интерфейс jQuery - запрещает передачу в дочерние элементы

Question

Я работаю с сортировками пользовательского интерфейса jQuery и создал систему divs в этом формате;

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

У divs может быть бесконечное количество дочерних элементов, и я хочу иметь возможность перетаскивать все .mainDiv в их родительское поле, поэтому я использовал это:

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

Однако это позволяет перетаскивать элементы в их дочерние или родственные .дочерние подразделения.чего я не хочу, чтобы произошло.Я хочу ограничить пребывание элементов в пределах их родительского элемента.

Любая помощь здесь была бы очень кстати.

Ваше здоровье

Answer 1

Мне удалось решить это следующим образом:

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

В вашем случае это должно работать с:

items: '> .mainDiv'

сдерживание:"родитель" не требуется.

В моем случае я включаю "сортируемый" во время предыдущего события клика, так как это быстрее.Я думаю, будет проще, если вы привяжете его к событию "наведение курсора мыши".Если вы создаете дерево динамически (например, Ajax), я рекомендую вам использовать "livequery".