Sortable: Copy the cell structure when sorting a table row. Fixes #9185 - Sortable: Placeholder breaks table-layout: fixed.

scottgonzalez · scottgonzalez · commit 9711c54c6d3d · 2013-04-17T15:09:06.000-04:00
(cherry picked from commit 09b3533)
diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html
@@ -44,6 +44,9 @@
 		border-width: 0;
 		height:19px;
 	}
+	#sortable-table {
+		width: 100%;
+	}
 	</style>
 </head>
 <body>
diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js
@@ -359,19 +359,31 @@ test( "{ placeholder: String }", function() {
 });
 
 test( "{ placholder: String } tr", function() {
-	expect( 3 );
-
-	var element = $( "#sortable-table tbody" ).sortable({
-		placeholder: "test",
-		start: function( event, ui ) {
-			ok( ui.placeholder.hasClass( "test" ), "placeholder has class" );
-			equal( ui.placeholder.children().length, 1, "placeholder tr contains a td" );
-			equal( ui.placeholder.children().html(), $( "<span>&#160;</span>" ).html(),
-				"placeholder td has content for forced dimensions" );
-		}
-	});
-
-	element.find( "tr" ).eq( 0 ).simulate( "drag", {
+	expect( 4 );
+
+	var originalWidths,
+		element = $( "#sortable-table tbody" ).sortable({
+			placeholder: "test",
+			start: function( event, ui ) {
+				var currentWidths = otherRow.children().map(function() {
+					return $( this ).width();
+				}).get();
+				ok( ui.placeholder.hasClass( "test" ), "placeholder has class" );
+				deepEqual( currentWidths, originalWidths, "table cells maintian size" );
+				equal( ui.placeholder.children().length, dragRow.children().length,
+					"placeholder has correct number of cells" );
+				equal( ui.placeholder.children().html(), $( "<span>&#160;</span>" ).html(),
+					"placeholder td has content for forced dimensions" );
+			}
+		}),
+		rows = element.children( "tr" ),
+		dragRow = rows.eq( 0 ),
+		otherRow = rows.eq( 1 );
+
+	originalWidths = otherRow.children().map(function() {
+		return $( this ).width();
+	}).get();
+	dragRow.simulate( "drag", {
 		dy: 1
 	});
 });
diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js
@@ -763,15 +763,16 @@ $.widget("ui.sortable", $.ui.mouse, {
 				element: function() {
 
 					var nodeName = that.currentItem[0].nodeName.toLowerCase(),
-						element = $( that.document[0].createElement( nodeName ) )
+						element = $( "<" + nodeName + ">", that.document[0] )
 							.addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
 							.removeClass("ui-sortable-helper");
 
 					if ( nodeName === "tr" ) {
-						// Use a high colspan to force the td to expand the full
-						// width of the table (browsers are smart enough to
-						// handle this properly)
-						element.append( "<td colspan='99'>&#160;</td>" );
+						that.currentItem.children().each(function() {
+							$( "<td>&#160;</td>", that.document[0] )
+								.attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+								.appendTo( element );
+						});
 					} else if ( nodeName === "img" ) {
 						element.attr( "src", that.currentItem.attr( "src" ) );
 					}
