knockout-sortable - simple list

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

by idavidcastellanos

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<ul class="items" data-bind="sortable: { data: items, options: { items: '.item' } }">
    <li data-bind="css: { item: !$data.disabled }, text: name">
    </li>
</ul>

<hr/>

<ul data-bind="foreach: items">
    <li data-bind="text: name"></li>
</ul>

CSS

.items {
    width: 200px;
    border: solid 2px black;
}

.items li {
    padding: 20px;
    margin: 2px;
}

.item {
    background-color: #ccc;
    border: solid 1px red;
}

JavaScript

var ViewModel = function() {
   this.items = ko.observableArray([
       { id: 1, name: "One" },
       { id: 1, name: "Two" },
       { id: 1, name: "Three" },
       { id: 1, name: "Four" },
       { id: 1, name: "Five", disabled: true }
   ]);    
};

ko.applyBindings(new ViewModel());