jQuery UI Sortable - disallowing transfer into child elements

Question

I'm working with jQuery's UI sortables and have created a system of divs 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>

The divs can have an infinite number of children, and I want to be able to drag and drop all of the .mainDiv's within their parent box, so I have used this:

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

However, this allows elements to be dragged into their child or sibling .children divs. which I do not want to happen. I want to restrict elements to staying within their parent.

Any help here would be hot.

Cheers

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: "parent" is not required.

In my case, I enable "sortable" during a previous click event, as it is faster. I think its easier if you bind it to the "mousedown" event. If you create the tree dynamically (e.g.Ajax), I recommend you to use "livequery".