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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$('.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:

1
2
3
4
5
6
7
8
9
10

<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.

If you ever used jQuery UI Accordion before, you probably notice that sometimes you have an annoyng bug when you change between accordion items: the bottom of the accordion jumps few pixels. Why is that? That’s why because Dimension plugins (which is included on last version of jquery, by the way) doesn’t know to compute very well the dimensions if you have padding/border attributes.

So, what can I do, perhaps you ask yourself?

• Don’t use padding and borders anymore. Uh… Not too reliable, isn’t?
• Use extra markup. Well… Is not too elegant, but is the best (and also the simplest) way to get rid of headaches! So the only thing you must do is to wrap all accordion item content into a div :

(more…)