jQueryUI sortable list in combination with Knockout - nested sortable lists

Question

I am new to Knockout (a couple of days) and am attempting to rework a page that has nested sortable lists to use it.

I found a great answer to using sortable lists with Knockout here: Knockout custom binding for jQuery UI Sortable - strange behavior

However, I can't get it to work with nested sortable lists. Attempting to click and drag any item below the root list has the effect of dragging the associated root item. In other words, the nested lists don't work at all.

The second option in the aforementioned solution is what I went with. It seemed the simplest and clearest to me. Is there a relatively easy way to apply it to nested sortables?

Answer 1

My suggestion would be to use the sortable plugin that I created here: https://github.com/rniemeyer/knockout-sortable

It supports nested sortables. With the simplest configuration, it would look like:

<ul data-bind="sortable: children">
    <li>
        <div data-bind="text: name"></div>
        <ul data-bind="sortable: subs">
            <li data-bind="text: name"></li>
        </ul>
    </li>
</ul>

Here is a sample: http://jsfiddle.net/rniemeyer/EMu95/

If you are still having a specific issue with your nested structures, then maybe you can fork the fiddle to demonstrate your issue.