Sortable: Append a tr with td to the placeholder of tbody elements

When sorting tbody elements of a table the placeholder needs to have a tr with
td elements to be visible. The appended elements are created in the same way
as for the placeholder of a tr element; the first row of the sorted tbody is
used for that.

Fixes #10682
Closes gh-1380
(cherry picked from commit 962e05dc1d)

tests/unit/sortable/sortable.html

@@ -74,20 +74,56 @@
 <table id="sortable-table">
 	<tbody>
 		<tr>
-			<td>1</td>
+			<td>1.1</td>
-			<td>2</td>
+			<td>1.2</td>
 		</tr>
 		<tr>
-			<td>3</td>
+			<td>1.3</td>
-			<td>4</td>
+			<td>1.4</td>
 		</tr>
 		<tr>
-			<td>5</td>
+			<td>1.5</td>
-			<td>6</td>
+			<td>1.6</td>
 		</tr>
 		<tr>
-			<td>7</td>
+			<td>1.7</td>
-			<td>8</td>
+			<td>1.8</td>
+		</tr>
+	</tbody>
+	<tbody>
+		<tr>
+			<td>2.1</td>
+			<td>2.2</td>
+		</tr>
+		<tr>
+			<td>2.3</td>
+			<td>2.4</td>
+		</tr>
+		<tr>
+			<td>2.5</td>
+			<td>2.6</td>
+		</tr>
+		<tr>
+			<td>2.7</td>
+			<td>2.8</td>
+		</tr>
+	</tbody>
+	<tbody>
+		<tr>
+			<td>3.1</td>
+			<td>3.2</td>
+		</tr>
+		<tr>
+			<td>3.3</td>
+			<td>3.4</td>
+		</tr>
+		<tr>
+			<td>3.5</td>
+			<td>3.6</td>
+		</tr>
+		<tr>
+			<td>3.7</td>
+			<td>3.8</td>
 		</tr>
 	</tbody>
 </table>

tests/unit/sortable/sortable_options.js

@@ -388,6 +388,42 @@ test( "{ placholder: String } tr", function() {
 	});
 });
 
+test( "{ placholder: String } tbody", function() {
+	expect( 6 );
+
+	var originalWidths,
+		element = $( "#sortable-table" ).sortable({
+			placeholder: "test",
+			start: function( event, ui ) {
+				var currentWidths = otherBody.children().map(function() {
+					return $( this ).width();
+				}).get();
+				ok( ui.placeholder.hasClass( "test" ), "placeholder has class" );
+				deepEqual( currentWidths, originalWidths, "table cells maintain size" );
+				equal( ui.placeholder.children().length, 1,
+					"placeholder has one child" );
+				equal( ui.placeholder.children( "tr" ).length, 1,
+					"placeholder's child is tr" );
+				equal( ui.placeholder.find( "> tr" ).children().length,
+					dragBody.find( "> tr:first" ).children().length,
+					"placeholder's tr has correct number of cells" );
+				equal( ui.placeholder.find( "> tr" ).children().html(),
+					$( "<span>&#160;</span>" ).html(),
+					"placeholder td has content for forced dimensions" );
+			}
+		}),
+		bodies = element.children( "tbody" ),
+		dragBody = bodies.eq( 0 ),
+		otherBody = bodies.eq( 1 );
+
+	originalWidths = otherBody.children().map(function() {
+		return $( this ).width();
+	}).get();
+	dragBody.simulate( "drag", {
+		dy: 1
+	});
+});
+
 /*
 test("{ revert: false }, default", function() {
 	ok(false, "missing test - untested code is broken code.");

ui/sortable.js

@@ -788,12 +788,13 @@ return $.widget("ui.sortable", $.ui.mouse, {
 							.addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
 							.removeClass("ui-sortable-helper");
 
-					if ( nodeName === "tr" ) {
+					if ( nodeName === "tbody" ) {
-						that.currentItem.children().each(function() {
+						that._createTrPlaceholder(
-							$( "<td>&#160;</td>", that.document[0] )
+							that.currentItem.find( "tr" ).eq( 0 ),
-								.attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+							$( "<tr>", that.document[ 0 ] ).appendTo( element )
-								.appendTo( element );
+						);
-						});
+					} else if ( nodeName === "tr" ) {
+						that._createTrPlaceholder( that.currentItem, element );
 					} else if ( nodeName === "img" ) {
 						element.attr( "src", that.currentItem.attr( "src" ) );
 					}
@@ -830,6 +831,16 @@ return $.widget("ui.sortable", $.ui.mouse, {
 
 	},
 
+	_createTrPlaceholder: function( sourceTr, targetTr ) {
+		var that = this;
+
+		sourceTr.children().each(function() {
+			$( "<td>&#160;</td>", that.document[ 0 ] )
+				.attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+				.appendTo( targetTr );
+		});
+	},
+
 	_contactContainers: function(event) {
 		var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, cur, nearBottom, floating, axis,
 			innermostContainer = null,