Permalink
Browse files

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
  • Loading branch information...
oemmes authored and scottgonzalez committed Oct 31, 2014
1 parent d95c23a commit 962e05dc1d0a51a7458bc44725417aa3462cd89a
Showing with 97 additions and 14 deletions.
  1. +44 −8 tests/unit/sortable/sortable.html
  2. +36 −0 tests/unit/sortable/sortable_options.js
  3. +17 −6 ui/sortable.js
@@ -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>
@@ -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.");
View
@@ -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,

0 comments on commit 962e05d

Please sign in to comment.