From 962e05dc1d0a51a7458bc44725417aa3462cd89a Mon Sep 17 00:00:00 2001 From: Nils Heuermann Date: Fri, 31 Oct 2014 14:24:29 +0100 Subject: [PATCH] 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 --- tests/unit/sortable/sortable.html | 52 +++++++++++++++++++++---- tests/unit/sortable/sortable_options.js | 36 +++++++++++++++++ ui/sortable.js | 23 ++++++++--- 3 files changed, 97 insertions(+), 14 deletions(-) diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html index 3edc999b76e..f13b895b8db 100644 --- a/tests/unit/sortable/sortable.html +++ b/tests/unit/sortable/sortable.html @@ -74,20 +74,56 @@ - - + + - - + + - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
121.11.2
341.31.4
561.51.6
781.71.8
2.12.2
2.32.4
2.52.6
2.72.8
3.13.2
3.33.4
3.53.6
3.73.8
diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js index f2beb4dbcd6..90cf765a2b5 100644 --- 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(), + $( " " ).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 b31c285e06e..6273109c6f6 100644 --- 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() { - $( " ", that.document[0] ) - .attr( "colspan", $( this ).attr( "colspan" ) || 1 ) - .appendTo( element ); - }); + if ( nodeName === "tbody" ) { + that._createTrPlaceholder( + that.currentItem.find( "tr" ).eq( 0 ), + $( "", 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() { + $( " ", 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,