jQuery UI Sortable Tips
By Chris Kershaw
April 23, 2010
I was recently tasked with developing a sorting tool to allow Paper Source to manage the sort order in which their categories are displayed. They had been updating a sort column in a database column but wanted a more visual aspect to do so. Due to the well-received feature developed by Steph, it was decided that they wanted to adapt their upsell interface to manage the categories. See here for the post using jQuery UI Drag Drop.
The only backend requirements were that the same sort column was used to drive the order. The front end required the ability to drag and drop positions within the same container. The upsell feature provided a great starting point to begin the development. After a quick review I determined that the jQuery UI Sortable function would be more favorable to use for the application.
Visual feedback was used to display the sorting in action with:
// on page load
$('tr.the_items td').sortable({
opacity: 0.7,
helper: 'clone',
});
// end on page load
Secondly I reiterate “jQuery UI Event Funtionality = Cool”
I only needed to use one function for this application to do the arrange the sorting values once the thumbnail had been dropped. This code calls a function which loops through all hidden input variables on the page and updates the sorting order.
// on page load
$('tr.the_items td').sortable({
stop: function(event, ui) { do_drop(this); },
});
// end on page load
Validating the sorting fields was a little different from the previously developed feature in that the number of available items could change depending on the category. The number of items could easily be 3 or 30. Therefore I needed a quick way to check the ever changing number. I decided to use a nested loop using the each function.
$('input.new_sku').each(
function( intIndex, obj ) {
$('input.new_sku').each(
function( secIndex, secObj ) {
if( (intIndex != secIndex) && ($(obj).val() == $(secObj).val()) ) {
error = true;
}
});
}
);
The rest of the feature uses some of the same logic previously documented here.
All in all I learned that the jQuery UI is very versatile and a pleasure to work with. I hope to be using more of its features in the near future.
Comments