Make Table Rows Sortable Using jQuery UI Sortable

Brian — Thu, 30 Jul 2009 20:17:51 +0000

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.

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();

Brian Grinstead » table

Make Table Rows Sortable Using jQuery UI Sortable