Nest jQuery UI sortables

Question

Is there a way to have nested jQuery sortables? As in nested containers, not in the sense of a nested list.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="container">
    <div class="item"></div>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="item"></div>
</div>

$('.container').sortable({
    connectWith: '.container'
});

http://jsfiddle.net/ExLqv/2/

That example pretty much works, but when I drop the nested container I get an error:

Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. 

I assume it is because when dragging a container it is positioned under the mouse, so when I drop it, it trys to put it inside itself.

I have a work around, although not ideal so the question still stands.

$('.container').sortable({
    connectWith: '.container:not(.ui-sortable-helper)',
    tolerance: "pointer",
    cursorAt: { left: -50 }
});

http://jsfiddle.net/ExLqv/8/

Answer 1

The problem

jQuery loses it when an element is both a sortable container and a sortable element within a sortable container.

The solution

As simple as wrapping the problematic object inside another element. Fiddle: http://jsfiddle.net/ExLqv/12/

The 'inner' container is wrapped like this:

<div class="container-wrapper">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

You avoid the problem, because the inner container itself is no longer both a sortable container and a sortable object within a sortable container. Instead, the sortable object is now the wrapper. Note that the classname container-wrapper is just for illustration's sake. You can remove it and it won't change the functionality.

Now, I don't know if this approach is any better for you than the workaround you mentioned yourself. I do feel though that a workaround of some sorts is necessary. A lot of people have run into this problem, and there seems to be general consensus that nested sortables are not a feature supported at this moment. There seem to be a bunch of plugins that fix the problem for you, judging by the results if I google 'jquery sortable nested' :)