A nice sortable trick (jQuery UI)
20 NovOn 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.
Comments (1)
Bookmark this article!
alt test