knockout-sortable - nested

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

by rniemeyer

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: children">
    <li>
        <div data-bind="text: name"></div>
        <ul data-bind="sortable: subs">
            <li data-bind="text: name"></li>
        </ul>
    </li>
</ul>

CSS

li { padding: 5px; margin: 5px; border: solid 1px #ccc; margin-left: 25px; }

ul { min-height: 100px; border: solid 1px black;

JavaScript

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

var Child = function(name) {
    this.name = name;
    this.subs = ko.observableArray([
       new Sub("one"),
       new Sub("two"),
       new Sub("three")
    ]);        
};

var ViewModel = function() {
    this.children = ko.observableArray([
       new Child("one"),
       new Child("two"),
       new Child("three")       
    ]);
};
        
ko.applyBindings(new ViewModel());