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'
});

/

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 }
});

/

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/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/ExLqv/8/

• javascript
• jquery
• jquery-ui
• jquery-ui-sortable
• nested-sortable

• interesting... yea I got Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent. – Andy Jones Commented Jan 8, 2014 at 4:19
• 1 Problem lies with the helper. You may need to clone the helper... $('.container').sortable({ connectWith: '.container', helper: 'clone' });, which of course would need some tweaking. jsfiddle/dirtyd77/Px73Q – Dom Commented Jan 9, 2014 at 15:40

4 Answers 4

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/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' :)

plugin fixes :

var sortable = $.widget("ui.sortable", $.ui.mouse, {
    _contactContainers: function(event) {   
            // never consider a container that's located within the item itself
            if($.contains(this.currentItem[0], this.containers[i].element[0]) || this.currentItem[0] === this.containers[i].element[0]) {
                continue;
            }
    }   
}

To create a nested sortable element as sortable container and sortable element, need to have a helper: clone and placeholder. When sorting, check if position placeholder is 0 then re-append placeholder to help the drag container know where to insert back and avoid

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Here is the test on fiddle: http://jsfiddle/0umjf5tc/1/

You can try it!It works perfectly!

$('.container').sortable({
    helper:'clone',
    connectWith: '.container',

});