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>
<h2 data-bind="text: name"></h2>

<ul id="tasks" class="item-list" data-bind="sortable: items">
    <li><span data-bind="text: sortOrder" class="bold"></span>&nbsp;&nbsp;<span data-bind="text: name" class="name"></span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" data-bind="click: $root.removeItem">Remove</a>

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

CSS

body {
    font-family:helvetica, arial;
    padding:20px;
}
.bold {
    font-weight:bold;
    color:red;
}
.name {
    display: inline-block;
    width:100px;
}
li {
    border:1px solid green;
    width:200px;
    margin-top:10px;
    padding:2px;
}
h2 {
    font-size:18px;
    font-weight:bold;
}

JavaScript

viewModel = function () {
    var self = this;

    self.name = ko.observable("Updating Sort Order Property");
    self.items = ko.observableArray([{
        name: "Bear",
        sortOrder: 1
    }, {
        name: "Lion",
        sortOrder: 2
    }, {
        name: "Zebra",
        sortOrder: 3
    }, {
        name: "Moose",
        sortOrder: 4
    }, {
        name: "Walrus",
        sortOrder: 5
    }]);

    self.removeItem = function (data) {
        self.items.remove(data);
    };

    ko.bindingHandlers.sortable.afterMove = function () {
        self.adjustOrder();
    };

    self.adjustOrder = function () {
        for (var i = 0, j = self.items().length; i < j; i++) {
            self.items()[i].sortOrder = i;
        };
    };


};

var vm = new viewModel();
ko.applyBindings(vm);



$('#tasks').sortable({
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    placeholder: 'draggable-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    stop: function (event, ui) { //just for Chrome!!!! so that dropdowns on items don't appear below other items after being moved
        $(ui.item).css('z-index', 'auto');
    }
});