A nice sortable trick (jQuery UI)

20 Nov

On a recent project i had to use sortable a LOT. I mean over 3-4 different sortable on page. So, how i manage to avoid heavy code?

One function to rule them all:

$('.sortable').each(function(){
	var _t = $(this);
	_t.sortable({
		handle:'.move',
		items:'dd',
		update:function(){
			$.ajax({
				type: "POST",
				url: $(this).find('a.move:eq(0)').attr('href'),
				data: _t.sortable('serialize'),
				cache: false
			});
		}
	});
});

The HTML markup (for two sortables) is this:

<dl class="sortable">
	<dd id="sotableEl1-1"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
	<dd id="sotableEl1-2"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
	<dd id="sotableEl1-3"><a href="updateUrl.php?id=sortableID-1" class="move">move</a></dd>
</dl>
<dl class="sortable">
	<dd id="sotableEl2-1"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
	<dd id="sotableEl2-2"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
	<dd id="sotableEl2-3"><a href="updateUrl.php?id=sortableID-2" class="move">move</a></dd>
</dl>

This means that you don’t need to use an ID for each sortable. Instead, you add the id to the update URL, on MOVE handler (which MUST be a link). I think this is pretty simple and useful trick.