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:

move
move
move


move
move
move

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.

No related posts.