Custom Knockout JS binding for jQuery UI Sortable

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" > 
    {{each(i, arrayItem) yourObservableArray}} 
        <li data-bind="sortableItem: arrayItem"></li> 

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

  • Riderman de Sousa Barbosa

    Works with `tr
    `  and 
    `td` ?
    I’m trying to use it but the position in the array is not changed!

    • Ivan Zlatev

      It wasn’t created with reordering table rows in mind, so no idea. But you can always debug it in your web browser to see what’s happening and where the culpit is.

  • Brad Wood

    Got it to work via data-bind=”sortableItem: $data”. $data refers to the current array item (when inside foreach). I don’t understand how it could work any other way.