From 09b3533910e887377fc87126608db1ded06f38f6 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 2 Apr 2013 10:42:21 -0400 Subject: [PATCH] Sortable: Copy the cell structure when sorting a table row. Fixes #9185 - Sortable: Placeholder breaks table-layout: fixed. --- tests/unit/sortable/sortable.html | 3 ++ tests/unit/sortable/sortable_options.js | 38 ++++++++++++++++--------- ui/jquery.ui.sortable.js | 11 +++---- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html index 7db14d482..8e0bac501 100644 --- a/tests/unit/sortable/sortable.html +++ b/tests/unit/sortable/sortable.html @@ -44,6 +44,9 @@ border-width: 0; height:19px; } + #sortable-table { + width: 100%; + } diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js index f0185b078..f2beb4dbc 100644 --- a/tests/unit/sortable/sortable_options.js +++ b/tests/unit/sortable/sortable_options.js @@ -359,19 +359,31 @@ test( "{ placeholder: String }", function() { }); test( "{ placholder: String } tr", function() { - expect( 3 ); - - var element = $( "#sortable-table tbody" ).sortable({ - placeholder: "test", - start: function( event, ui ) { - ok( ui.placeholder.hasClass( "test" ), "placeholder has class" ); - equal( ui.placeholder.children().length, 1, "placeholder tr contains a td" ); - equal( ui.placeholder.children().html(), $( " " ).html(), - "placeholder td has content for forced dimensions" ); - } - }); - - element.find( "tr" ).eq( 0 ).simulate( "drag", { + expect( 4 ); + + var originalWidths, + element = $( "#sortable-table tbody" ).sortable({ + placeholder: "test", + start: function( event, ui ) { + var currentWidths = otherRow.children().map(function() { + return $( this ).width(); + }).get(); + ok( ui.placeholder.hasClass( "test" ), "placeholder has class" ); + deepEqual( currentWidths, originalWidths, "table cells maintian size" ); + equal( ui.placeholder.children().length, dragRow.children().length, + "placeholder has correct number of cells" ); + equal( ui.placeholder.children().html(), $( " " ).html(), + "placeholder td has content for forced dimensions" ); + } + }), + rows = element.children( "tr" ), + dragRow = rows.eq( 0 ), + otherRow = rows.eq( 1 ); + + originalWidths = otherRow.children().map(function() { + return $( this ).width(); + }).get(); + dragRow.simulate( "drag", { dy: 1 }); }); diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index d16407216..7b145159e 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -752,15 +752,16 @@ $.widget("ui.sortable", $.ui.mouse, { element: function() { var nodeName = that.currentItem[0].nodeName.toLowerCase(), - element = $( that.document[0].createElement( nodeName ) ) + element = $( "<" + nodeName + ">", that.document[0] ) .addClass(className || that.currentItem[0].className+" ui-sortable-placeholder") .removeClass("ui-sortable-helper"); if ( nodeName === "tr" ) { - // Use a high colspan to force the td to expand the full - // width of the table (browsers are smart enough to - // handle this properly) - element.append( " " ); + that.currentItem.children().each(function() { + $( " ", that.document[0] ) + .attr( "colspan", $( this ).attr( "colspan" ) || 1 ) + .appendTo( element ); + }); } else if ( nodeName === "img" ) { element.attr( "src", that.currentItem.attr( "src" ) ); } -- 2.39.5