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
(cherry picked from commit 962e05d)
  • Loading branch information...
oemmes authored and scottgonzalez committed Oct 31, 2014
1 parent d699725 commit ddc1b32a45746db7cc8e96de92818936464b323b
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
@@ -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" ) {
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" ) );
}
@@ -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,

0 comments on commit ddc1b32

Please sign in to comment.