Knockout.js nested sortable bindings

Question

I am working with the knockout.js sortable plugin; however, I ran into a problem that I have so far been unable to solve. I have two sortable bindings, one for buckets and another for bucketItems. I am able to reorder bucketItems between buckets; however, I am unable to reorder buckets. Would you have any idea why this would be? I am also using nested with bindings, but as far as I can tell, this is not what is causing problems.

I would greatly appreciate any insight you have to offer.

Answer 1

I don't know your exact structure, but you can use the connectClass option to control which sortable lists are connected. For example, if you did this:

<ul data-bind="sortable: { data: buckets, connectClass: 'buckets' }">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="sortable: { data: items, connectClass: 'items' }">
            <li data-bind="text: name"></li>
        </ul>
    </li>
</ul>

You would only be able to drop a bucket within buckets and an item within items. The plugin automatically adds the class to the parent element.

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

If you did not want to be able to sort items between buckets, then you could apply a unique connectClass to each like:

http://jsfiddle.net/rniemeyer/czNe8/