4

im trying to implement a nice gui for organizing posts. i want to use jQuery UI's sortable so the user can drag/drop. i have a column for each post in my database "display order" that i sort by

how can i effectively translate what jquery does to the display_order columns in my db?

1 Answer 1

4

One step at the time

  1. Attach onchange handler to ui sortable.
  2. Each time order changes, loop through your elements and recalculate their positions.
  3. Save new position data with ajax request, or add a 'save' button for the user to do it later.

edit
but how do I also get the unique IDs
See #2.

var rank = 1;
$('.my-element').each(function() {
    $(this).find('input.rank').val(rank++);
});

As for 'expensive', that's your choice. You can add 'save' button, as I noted above.

2
  • thats an expensive operation though. and how do i keep track of which record is where. .serialize() only returns their new orders, but how do I also get the unique IDs so i can update the DB record. id like to do it AJAXy, but thats an expensive operation to perform (2 updates) every time a user performs a drop - that could cause a lot of server load
    – sethvargo
    Commented Jan 5, 2011 at 1:58
  • @set.vargo, if you've already implemented sort and it's too slow to be usable, then that is one thing. But until you have a working implementation, I'd suggest not to worry about performance. I've been burned over and over again in the past by over-thinking like that, so just wanted to suggest that you not worry about performance until performance is a problem ;-) Plus you can always refactor by paging, or using different sorting algorithm or something if it's too slow or causing too much server traffic. Commented Jan 5, 2011 at 2:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.