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 like fruit_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 ColdFusion in this demo) we might have some code that looks like this update-sort.cfm:

<cfparam name="url.fruitOrder" type="string">
<!--- fruitOrder = fruit_1,fruit_2, etc...--->
<cfset order = 0>
<cfloop list="#url.fruitOrder#" index="item">
	<cfset fruit_id = Val(ListLast(item, "_"))>
	<cfset order = order+1>
	<cfquery>
		UPDATE fruit
		SET sort_order = <cfqueryparam value="#order#" cfsqltype="cf_sql_integer">
		WHERE fruit_id = <cfqueryparam value="#fruit_id#" cfsqltype="cf_sql_integer">
	</cfquery>
	<cfoutput>#fruit_id#</cfoutput>
</cfloop>