knockout-sortable - connected lists

https://github.com/rniemeyer/knockout-sortable

by zoldello

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<ul data-bind="sortable: { data: buckets, connectClass: 'buckets' }">
    <li>
        <span data-bind="text: name"></span>
        <ul 
        data-bind="sortable: { data: items,  connectClass: 'items-' + name, options: { items: 'li:not(.nomove)'} }">
            <li data-bind="text: name"></li>
            <li class="nomove" data-bind="text: name + ' ABC'"></li> 
        </ul>
    </li>
</ul>

CSS

li {
   margin: 10px;
   padding: 10px;
   border: solid 1px black;    
}

.buckets li {
    background-color: #aaa;
}

.items-one li {
    background-color: red;
}

.items-two li {
    background-color: yellow;
}

.items-three li {
    background-color: blue;
}

.items-four li {
    background-color: purple;
}

JavaScript

var BucketItem = function(name) {
    this.name = name;
};

var Bucket = function(name) {
    this.name = name;
    this.items = ko.observableArray([
       new BucketItem(name + "1"),
       //new BucketItem(name + "2"),
      // new BucketItem(name + "3"),
      // new BucketItem(name + "4")
    ])
};
      
ko.applyBindings({
    buckets: ko.observableArray([
      new Bucket("one"),
      //new Bucket("two"),
     // new Bucket("three"),
      //new Bucket("four")
    ])
});