mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Sortable: When sorting table rows, create a td to force dimensions. Fixes #4765 - Sortable: Placeholder not displayed when sorting table rows.
This commit is contained in:
parent
51eb28e76e
commit
bd47bd4ace
@ -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>
|
||||
|
@ -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> </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.");
|
||||
});
|
||||
|
20
ui/jquery.ui.sortable.js
vendored
20
ui/jquery.ui.sortable.js
vendored
@ -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(!className) {
|
||||
el.style.visibility = "hidden";
|
||||
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'> </td>" );
|
||||
}
|
||||
|
||||
return el;
|
||||
if ( !className ) {
|
||||
element.css( "visibility", "hidden" );
|
||||
}
|
||||
|
||||
return element;
|
||||
},
|
||||
update: function(container, p) {
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user