JQuery UI nested sortables: all nested lists/items count as one item off the root item

Question

I am using this plugin: http://mjsarfatti.com/sandbox/nestedSortable/

which seems to be great and just adds a few extra options to the default jQueryUI sortable (https://github.com/mjsarfatti/nestedSortable - doesn't work with 1.9+ though).

I however seem to have a problem which you can see from this fiddle: http://jsfiddle.net/kzswp/6/ seems to be causing all the nested list items to count as one big item under the root-most item.

Also if you drag one of the root items to be a child of the other root item, the ordering character isn't consistent. Even if I am trying to set an item up as a child item in an already existing nested list, it seems to create a new list to put that item.

Here is my markup:

<ol type="I" id="top-level-list">
        <li>
            <h3>Category #1</h3>
            <div class="child-items">
                    <ol type="A">
                        <li>
                             <div class="form-row" >
                                <div class="form-item">Question #1</div>
                            </div>
                    <div class="child-items">
                        <ol type="1">
                            <li>
                                <div class="required-parent-response c7ad1cdb-e727-4fb7-b0eb-0f04382dcd86">
                                    <div class="form-row" >
                                        <div class="form-item">Some other question</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="required-parent-response c7ad1cdb-e727-4fb7-b0eb-0f04382dcd86">
                                    <div class="form-row" >
                                        <div class="form-item">Branch Question - under Question #1</div>
                                    </div>
                                </div>
                            </li>
                        </ol>
                    </div>
            </li>
                    </ol>

                    </div>
        </li>
        <li>
            <h3>Category #2</h3>
            <div class="child-items">
                <ol type="A">
                    <li>
                        <div class="form-row" >
                            <div class="form-item">Category #2 - question 1</div>
                        </div>

                    </li>
                </ol>
            </div>
        </li>

​

I thought the issue was the <div class="child-items"> surrounding the nested lists (I need this for other JS on the page), but even after removing it: http://jsfiddle.net/xJzZU/1/

That only fixes the ordering character, but all the sublists and their items still count as one big item.

Anyone know how I can fix this while keeping the child-items div surrounding those nested elements?

Answer 1

first of all you should add items and toleranceElement in the options. Something like this:

            $("#top-level-list").nestedSortable({
                //handle: ".ui-icon",
                maxLevels: 3,
                placeholder: "placeholder",
                help: "clone",
                revert: 300,
                opacity: .6,
                forcePlaceholderSize: true,
                tabSize: 40,
                items: 'li',
                toleranceElement: '> *'
            });

Secondly, that extra <div class="child-items"> won't really work with nestedSortable unfortunately :/
That's because the plugin expects ol's and li's to be in a direct parent-child relation... As stated in the docs each list item must have either one or two children, one of which being the toleranceElement, the other being a nested list.