Skip to content
Permalink
Browse files

Sortable: When sorting table rows, create a td to force dimensions. F…

…ixes #4765 - Sortable: Placeholder not displayed when sorting table rows.
  • Loading branch information...
scottgonzalez committed Feb 21, 2013
1 parent 51eb28e commit bd47bd4ace3789d9eb302b0dce6f6e042d08a7f1
Showing with 67 additions and 8 deletions.
  1. +21 −0 tests/unit/sortable/sortable.html
  2. +32 −2 tests/unit/sortable/sortable_options.js
  3. +14 −6 ui/jquery.ui.sortable.js
@@ -63,6 +63,27 @@ <h2 id="qunit-userAgent"></h2>
<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>
@@ -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.");
});
@@ -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) {

0 comments on commit bd47bd4

Please sign in to comment.
You can’t perform that action at this time.