Nest jQuery UI sortables

Answer 1

You can try it!It works perfectly!

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

});

Answer 2

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.net/0umjf5tc/1/

Answer 3

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

Answer 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.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' :)