mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
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
)
This commit is contained in:
parent
d6997254f0
commit
ddc1b32a45
@ -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> </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.");
|
||||
|
@ -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> </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> </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,
|
||||
|
Loading…
Reference in New Issue
Block a user