JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<script src="http://cloud.github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js"></script>
<ul data-bind="foreach: models">
    <li data-bind="draggable: $data, text: name"></li>
</ul>

<ul data-bind="sortable: { template: 'childTmpl', data: children }">
</ul>

<script id="childTmpl" type="text/html">
    <li>
        <span data-bind="text: name" />
        <ul data-bind="sortable: { template: 'childTmpl', data: subs }" />
    </li>
</script>
<hr/>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

CSS

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

JavaScript

var Child = function(name, children) {
    this.name = name;
    this.subs = ko.observableArray(children || []);      
};

Child.prototype.clone = function() {
    //clone each child
    var clonedChildren = ko.utils.arrayMap(this.subs(), function(child) {
        return child.clone(); 
    });
    
   return new Child(this.name, clonedChildren); 
};

var ViewModel = function() {
    this.children = ko.observableArray([
       new Child("one", [new Child("1.1")])
    ]);
    this.models = [ new Child ("Model", [new Child("M.1")]) ];
};
        
ko.applyBindings(new ViewModel());