jQuery UI Sortable Tutorial

Here's a simple tutorial showing how to use jQuery UI's sortable plugin to update a database table's sort order field on the fly using ajax.
Here's the HTML markup used to define the content that will be sortable (note you don't need to use a ul as most examples will show, you can use any container, and its children will be sortable in this case we used divs.):

<div id="fruit_sort">
 <div id="fruit_1">Apple</div>
 <div id="fruit_2">Orange</div>
 <div id="fruit_3">Pear</div>
</div>

In order to make the fruit_sort container sortable, we need to run $('#fruit_sort').sortable(); at a bare minimum. But how can we update our database every time the list is sorted? To do this we must bind to the sortable update event. Accordign to the docs this event is triggered when the user stopped sorting and the DOM position has changed.

So here's the JavaScript we are going to use to make our fruit_sort work:

<script language="javascript">
 $(document).ready(function(){
  $('#fruit_sort').sortable({
   update: function(event, ui) {
    var fruitOrder = $(this).sortable('toArray').toString();
    $.get('update-sort.cfm', {fruitOrder:fruitOrder});
   }
  });
 });
</script>

By calling $(this).sortable('toArray').toString() in our example update event handler we are given a string list of all the item id's, it might look likefruit_2,fruit_1,fruit_3. We can then send the new order to our server in an ajax request using $.get()
Finally to handle things on the server side (using AspNet in this demo) we might have some code that looks like this sort.ashx:

/// <summary>
/// Summary description for SortProducts
/// </summary>
public class SortProducts : IHttpHandler
{
    private readonly ProductRepository _productRepository = 
            new ProductRepository();
    public void ProcessRequest(HttpContext context)
    {
        var productIds = context.Request["fruitOrder"].Split
           (new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
        var products = productIds.Select
           (productId => _productRepository.GetById(int.Parse(productId)))
            .ToList();
        int sort = 0;
        foreach (var product in products)
        {
            product.SortOrder = sort++;
            _productRepository.UpdateOnCommit(product);
        }
        _productRepository.CommitChanges();
        
        context.Response.ContentType = "text/plain";
        context.Response.Write("Success");
    }
    
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}