jQuery UI Sortable with tables

note: If you have any other option besides trying to drag table rows, pretend this post doesn’t exist and use divs.

If you have a need for drag and drop functionality, look no further than jQuery UI’s sortable plugin.  If you need to drag and drop table rows, you’ll need to help the plugin along to ensure your table looks correct when dragging rows around.  Luckily the plugin exposes an option called helper.  This function simply runs when a draggable item is being moved.  This code below is pretty nasty, but it makes sure your dynamic width table looks great when dragging.

 var tableRowHelper = function(e, ui) {
	ui.children().each(function() {
		var newWidth = $(this).css('width');
		if (newWidth == 'auto' || newWidth == '') {
			newWidth = $(this).width() + 'px';
		}
		$(this).css('width', newWidth);
	});
	return ui;
 };	

// usage
$('#someId').sortable({
	helper: tableRowHelper 
});