]> source.dussan.org Git - jquery-ui.git/commitdiff
Sortable: Copy the cell structure when sorting a table row. Fixes #9185 - Sortable...
authorScott González <scott.gonzalez@gmail.com>
Tue, 2 Apr 2013 14:42:21 +0000 (10:42 -0400)
committerScott González <scott.gonzalez@gmail.com>
Tue, 2 Apr 2013 14:42:21 +0000 (10:42 -0400)
tests/unit/sortable/sortable.html
tests/unit/sortable/sortable_options.js
ui/jquery.ui.sortable.js

index 7db14d4822f53d1788ff2e5d32067f4f46a34d5e..8e0bac501f41801705d208bf9c5877693e04b065 100644 (file)
@@ -44,6 +44,9 @@
                border-width: 0;
                height:19px;
        }
+       #sortable-table {
+               width: 100%;
+       }
        </style>
 </head>
 <body>
index f0185b078b0c41217e13a13d6700f50c30323ab9..f2beb4dbcd6d33cbcc15faff20d44ac2ac89972e 100644 (file)
@@ -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(), $( "<span>&#160;</span>" ).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(), $( "<span>&#160;</span>" ).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
        });
 });
index d16407216e30f1e15fadd4ec2b5893eee74b8f65..7b145159ebc31e0e8dcfad6a559ff27153f3479f 100644 (file)
@@ -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( "<td colspan='99'>&#160;</td>" );
+                                               that.currentItem.children().each(function() {
+                                                       $( "<td>&#160;</td>", that.document[0] )
+                                                               .attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+                                                               .appendTo( element );
+                                               });
                                        } else if ( nodeName === "img" ) {
                                                element.attr( "src", that.currentItem.attr( "src" ) );
                                        }