Sortable: When sorting table rows, create a td to force dimensions. Fixes #4765 ...

diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html
index c23a15854e4efe1325633fafcd5739122aa727db..6e326a8657c994f8ca20405180a606da06d39ec2 100644 (file)
--- a/tests/unit/sortable/sortable.html
+++ b/tests/unit/sortable/sortable.html
@@ -63,6 +63,27 @@
        <li>Item 5</li>
 </ul>
 
+<table id="sortable-table">
+       <tbody>
+               <tr>
+                       <td>1</td>
+                       <td>2</td>
+               </tr>
+               <tr>
+                       <td>3</td>
+                       <td>4</td>
+               </tr>
+               <tr>
+                       <td>5</td>
+                       <td>6</td>
+               </tr>
+               <tr>
+                       <td>7</td>
+                       <td>8</td>
+               </tr>
+       </tbody>
+</table>
+
 </div>
 </body>
 </html>

diff --git a/tests/unit/sortable/sortable_options.js b/tests/unit/sortable/sortable_options.js
index cf35aedb1df6ee5b5de418f14a9634fb1dc1846a..fe50be002d7801a60e3f87dab6a137593688dca8 100644 (file)
--- a/tests/unit/sortable/sortable_options.js
+++ b/tests/unit/sortable/sortable_options.js
@@ -185,11 +185,41 @@ test("{ opacity: 1 }", function() {
 test("{ placeholder: false }, default", function() {
        ok(false, "missing test - untested code is broken code.");
 });
+*/
+test( "{ placeholder: String }", function() {
+       expect( 1 );
 
-test("{ placeholder: String }", function() {
-       ok(false, "missing test - untested code is broken code.");
+       var element = $( "#sortable" ).sortable({
+               placeholder: "test",
+               start: function( event, ui ) {
+                       ok( ui.placeholder.hasClass( "test" ), "placeholder has class" );
+               }
+       });
+
+       element.find( "li" ).eq( 0 ).simulate( "drag", {
+               dy: 1
+       });
+});
+
+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", {
+               dy: 1
+       });
 });
 
+/*
 test("{ revert: false }, default", function() {
        ok(false, "missing test - untested code is broken code.");
 });

diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js
index c9b503bd09b843ed2eed70a95def239e9cfb1215..f095ce9c505dd996a0d6206c579021d34b9db22d 100644 (file)
--- a/ui/jquery.ui.sortable.js
+++ b/ui/jquery.ui.sortable.js
@@ -752,15 +752,23 @@ $.widget("ui.sortable", $.ui.mouse, {
                        o.placeholder = {
                                element: function() {
 
-                                       var el = $(document.createElement(that.currentItem[0].nodeName))
-                                               .addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
-                                               .removeClass("ui-sortable-helper")[0];
+                                       var nodeName = that.currentItem[0].nodeName.toLowerCase(),
+                                               element = $( that.document[0].createElement( nodeName ) )
+                                                       .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>" );
+                                       }
 
-                                       if(!className) {
-                                               el.style.visibility = "hidden";
+                                       if ( !className ) {
+                                               element.css( "visibility", "hidden" );
                                        }
 
-                                       return el;
+                                       return element;
                                },
                                update: function(container, p) {