For the work in progress Part 3 of my Editing Variable Length Reorderable Collections in ASP.NET MVC blog series I have created a custom Knockout JS binding that keeps a Knockout JS observable array in sync with a jQuery UI sortable.

It’s available here:

Basic usage is to use a sortableList binding on the ul which you want to make a jQuery Sortable and then a sortableItem binding for each sortable item (li) in the list like that:

<ul data-bind="sortableList: yourObservableArray" > 
     
        <li data-bind="sortableItem: arrayItem"></li> 
     
</ul>

Live example (if you are reading this in a feed reader you will need to open the blog post properly to see this):