knockout-sortable - simple list

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

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="frame">
    <ul class="Tasks" data-bind="sortable: {data: TaskLists, connectClass: 'columns', options: { placeholder: 'list-highlight'}}">
      <li class="taskList">
        <span data-bind="text: Title" style='background: lightgray;'></span>
        <ul data-bind="sortable: {data: Tasks, connectClass: 'columnItems', options : { placeholder: 'ui-state-highlight'}}">
            <li class="item">
              <span class="taskName" href="#" data-bind="text: name"></span>
            </li>
        </ul>
       </li>
    </ul>
</div>

CSS

.frame{
    padding: 10px;
    overflow:auto;
}

.item {
   border: black 1px solid;
   width: 100px;
   background-color: #DDD;
   cursor: move;
   text-align: center;
   margin-top: 2px;
   margin-bottom: 2px;
}

.list-highlight{
    width: 100px;
    float:left;
    background: gray;
}

.taskList{
    width: 110px;
    float:left;
    background: lightgreen;
}

.Tasks{
    width:400px;
    border: 1px #eee solid;
    height: 100%;
}

.taskName{
    word-wrap: break-word;
}

.ui-state-highlight{
    background: grey;
    border:1px dashed grey;
}

JavaScript

var Task = function(name) {
    this.name = ko.observable(name);
}

var ViewModel = function() {
    var self = this;
    self.tasks1 = ko.observableArray([]);
    self.tasks2 = ko.observableArray([]);
    for (var i=0;i<5;i++){ 
        self.tasks1.push(new Task("This task belongs to list one"));
        self.tasks2.push(new Task("This task belongs to list two"));
    }
    self.TaskList1 = {Tasks: self.tasks1, Title:'List One'};
    self.TaskList2 = {Tasks: self.tasks2, Title:'List Two'};
    self.TaskLists = ko.observableArray([]);
    self.TaskLists.push(self.TaskList1);
    self.TaskLists.push(self.TaskList2);
};

ko.bindingHandlers.sortable.options = {
        //placeholder: 'ui-state-highlight',
        start: function (e, ui) {
            var dragItems = $('.ui-state-highlight');
            var dragLists = $('.list-highlight');
            var elementClass = ui.helper[0].className;
            if(elementClass === "item")
                  dragItems.css("height",ui.helper.outerHeight());
            if(elementClass === "taskList")
                  dragLists.css("height",ui.helper.outerHeight());
        }
    };
ko.applyBindings(new ViewModel());