Posts Tagged ‘html’

Make Table Rows Sortable Using jQuery UI Sortable

Thursday, July 30th, 2009

I wrote an article on the LANIT Development blog about a problem that I ran into when trying to set up a basic sortable table using jQuery UI. The columns would collapse down once the dragging began.

sortable-row-collapsed

This was fixed by adjusting the helper object for the sortable function. Check out the article for all the details, but here is a sample of the code if you are just looking for the solution:

// Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
	ui.children().each(function() {
		$(this).width($(this).width());
	});
	return ui;
};
 
$("#sort tbody").sortable({
	helper: fixHelper
}).disableSelection();