JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.0.debug.js"></script>
<script src="https://github.com/rniemeyer/knockout-sortable/raw/master/build/knockout-sortable.js"></script>
<ul data-bind="sortable: { data: items, connectClass: 'sortA' }">
  <li>
    <span data-bind="text: name"></span>
    <div data-bind="sortable: { data: subItems, connectClass: 'sortB' }">
      <span data-bind="text: text"></span>
    </div>
  </li>
</ul>

CSS

li { border: 1px solid black; }
div { border: 1px dotted black; height: 20px; }
div span { border: 1px dotted red; padding: 0px 4px; width: 100px; }

JavaScript

var SubItem = function(text) {
    this.text = ko.observable(text);
}

var Item = function(name) {
    this.name = ko.observable(name);
    this.subItems = ko.observableArray([
        new SubItem("alpha"),
        new SubItem("beta")
        ]);
};

var ViewModel = function() {
    var self = this;
    self.items = ko.observableArray([
        new Item("Item1"),
        new Item("Item2"),
        new Item("Item3")
        ]);
};

ko.applyBindings(new ViewModel());