JQuery UI Sortable - Prevent children from passing

Question

I work with JQuery UI sorters and created a divs system in this format;

<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 can have an infinite number of children, and I want to be able to drag and drop all .mainDiv into their parent field, so I used this:

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

However, this allows you to move elements to your child or child divs. which I do not want. I want to limit the elements to being within their parent.

Any help here would be hot.

Greetings

Answer 1

I managed to solve it like this:

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

In your case, it should work with:

items: '> .mainDiv'

containment: “parental” not required.

"sortable" , . , , "mousedown". (, Ajax), "livequery".