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

diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html
index 3edc999b76e10ca54c046b84d633631a726bd765..f13b895b8dbda989d8ea62a643521db6791393b4 100644 (file)
--- a/tests/unit/sortable/sortable.html
+++ b/tests/unit/sortable/sortable.html
@@ -74,20 +74,56 @@
 <table id="sortable-table">
        <tbody>
                <tr>
-                       <td>1</td>
-                       <td>2</td>
+                       <td>1.1</td>
+                       <td>1.2</td>
                </tr>
                <tr>
-                       <td>3</td>
-                       <td>4</td>
+                       <td>1.3</td>
+                       <td>1.4</td>
                </tr>
                <tr>
-                       <td>5</td>
-                       <td>6</td>
+                       <td>1.5</td>
+                       <td>1.6</td>
                </tr>
                <tr>
-                       <td>7</td>
-                       <td>8</td>
+                       <td>1.7</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>

diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js
index f2beb4dbcd6d33cbcc15faff20d44ac2ac89972e..90cf765a2b58554e20d1a6a5f4d0c2f9759a1199 100644 (file)
--- a/tests/unit/sortable/sortable_options.js
+++ b/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.");

diff --git a/ui/sortable.js b/ui/sortable.js
index b31c285e06e80a455be5cf4c50f58d6d480a4ff4..6273109c6f6153ac159a1d6135e27fd7e44c4961 100644 (file)
--- a/ui/sortable.js
+++ b/ui/sortable.js
@@ -793,12 +793,13 @@ return $.widget("ui.sortable", $.ui.mouse, {
                                                        .addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
                                                        .removeClass("ui-sortable-helper");
 
-                                       if ( nodeName === "tr" ) {
-                                               that.currentItem.children().each(function() {
-                                                       $( "<td>&#160;</td>", that.document[0] )
-                                                               .attr( "colspan", $( this ).attr( "colspan" ) || 1 )
-                                                               .appendTo( element );
-                                               });
+                                       if ( nodeName === "tbody" ) {
+                                               that._createTrPlaceholder(
+                                                       that.currentItem.find( "tr" ).eq( 0 ),
+                                                       $( "<tr>", that.document[ 0 ] ).appendTo( element )
+                                               );
+                                       } else if ( nodeName === "tr" ) {
+                                               that._createTrPlaceholder( that.currentItem, element );
                                        } else if ( nodeName === "img" ) {
                                                element.attr( "src", that.currentItem.attr( "src" ) );
                                        }
@@ -835,6 +836,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,