Skip to content

Commit f4d0a0e

Browse files
committed
Sortable: Allow 0-height containers to be sortable as in 1.12.1
Note that container specific events will not fire when the dragged element is interacting with zero height containers. Fixes gh-1998
1 parent 1f0851b commit f4d0a0e

File tree

2 files changed

+96
-59
lines changed

2 files changed

+96
-59
lines changed

tests/unit/sortable/core.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,44 @@ QUnit.test( "ui-sortable-handle applied to appropriate element", function( asser
4242
assert.equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" );
4343
} );
4444

45+
// gh-1998
46+
QUnit.test( "drag & drop works with a zero-height container", function( assert ) {
47+
var ready = assert.async();
48+
assert.expect( 3 );
49+
50+
var el = $( "<ul>\n" +
51+
" <style>" +
52+
" .list-item-gh-1998 {\n" +
53+
" float: left;\n" +
54+
" display: block;\n" +
55+
" width: 100px;\n" +
56+
" height: 100px;\n" +
57+
" }\n" +
58+
" </style>\n" +
59+
" <li class='list-item-gh-1998'>Item 1</li>\n" +
60+
" <li class='list-item-gh-1998'>Item 2</li>\n" +
61+
" <li class='list-item-gh-1998'>Item 3</li>\n" +
62+
"</ul>" )
63+
.sortable()
64+
.appendTo( "#qunit-fixture" );
65+
66+
function step1() {
67+
el.find( "li" ).eq( 0 ).simulate( "drag", {
68+
dx: 150,
69+
dy: 1,
70+
moves: 3
71+
} );
72+
setTimeout( step2 );
73+
}
74+
75+
function step2() {
76+
assert.equal( el.find( "li" ).eq( 0 ).text(), "Item 2" );
77+
assert.equal( el.find( "li" ).eq( 1 ).text(), "Item 1" );
78+
assert.equal( el.find( "li" ).eq( 2 ).text(), "Item 3" );
79+
ready();
80+
}
81+
82+
step1();
83+
} );
84+
4585
} );

ui/widgets/sortable.js

Lines changed: 56 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -421,79 +421,76 @@ return $.widget( "ui.sortable", $.ui.mouse, {
421421
this.helper[ 0 ].style.top = this.position.top + "px";
422422
}
423423

424-
//Post events to containers
425-
this._contactContainers( event );
426-
427-
if ( this.innermostContainer !== null ) {
424+
//Do scrolling
425+
if ( o.scroll ) {
426+
if ( this._scroll( event ) !== false ) {
428427

429-
//Do scrolling
430-
if ( o.scroll ) {
431-
if ( this._scroll( event ) !== false ) {
428+
//Update item positions used in position checks
429+
this._refreshItemPositions( true );
432430

433-
//Update item positions used in position checks
434-
this._refreshItemPositions( true );
435-
436-
if ( $.ui.ddmanager && !o.dropBehaviour ) {
437-
$.ui.ddmanager.prepareOffsets( this, event );
438-
}
431+
if ( $.ui.ddmanager && !o.dropBehaviour ) {
432+
$.ui.ddmanager.prepareOffsets( this, event );
439433
}
440434
}
435+
}
441436

442-
this.dragDirection = {
443-
vertical: this._getDragVerticalDirection(),
444-
horizontal: this._getDragHorizontalDirection()
445-
};
446-
447-
//Rearrange
448-
for ( i = this.items.length - 1; i >= 0; i-- ) {
449-
450-
//Cache variables and intersection, continue if no intersection
451-
item = this.items[ i ];
452-
itemElement = item.item[ 0 ];
453-
intersection = this._intersectsWithPointer( item );
454-
if ( !intersection ) {
455-
continue;
456-
}
457-
458-
// Only put the placeholder inside the current Container, skip all
459-
// items from other containers. This works because when moving
460-
// an item from one container to another the
461-
// currentContainer is switched before the placeholder is moved.
462-
//
463-
// Without this, moving items in "sub-sortables" can cause
464-
// the placeholder to jitter between the outer and inner container.
465-
if ( item.instance !== this.currentContainer ) {
466-
continue;
467-
}
437+
this.dragDirection = {
438+
vertical: this._getDragVerticalDirection(),
439+
horizontal: this._getDragHorizontalDirection()
440+
};
468441

469-
// Cannot intersect with itself
470-
// no useless actions that have been done before
471-
// no action if the item moved is the parent of the item checked
472-
if ( itemElement !== this.currentItem[ 0 ] &&
473-
this.placeholder[ intersection === 1 ?
474-
"next" : "prev" ]()[ 0 ] !== itemElement &&
475-
!$.contains( this.placeholder[ 0 ], itemElement ) &&
476-
( this.options.type === "semi-dynamic" ?
477-
!$.contains( this.element[ 0 ], itemElement ) :
478-
true
479-
)
480-
) {
442+
//Rearrange
443+
for ( i = this.items.length - 1; i >= 0; i-- ) {
481444

482-
this.direction = intersection === 1 ? "down" : "up";
445+
//Cache variables and intersection, continue if no intersection
446+
item = this.items[ i ];
447+
itemElement = item.item[ 0 ];
448+
intersection = this._intersectsWithPointer( item );
449+
if ( !intersection ) {
450+
continue;
451+
}
483452

484-
if ( this.options.tolerance === "pointer" ||
485-
this._intersectsWithSides( item ) ) {
486-
this._rearrange( event, item );
487-
} else {
488-
break;
489-
}
453+
// Only put the placeholder inside the current Container, skip all
454+
// items from other containers. This works because when moving
455+
// an item from one container to another the
456+
// currentContainer is switched before the placeholder is moved.
457+
//
458+
// Without this, moving items in "sub-sortables" can cause
459+
// the placeholder to jitter between the outer and inner container.
460+
if ( item.instance !== this.currentContainer ) {
461+
continue;
462+
}
490463

491-
this._trigger( "change", event, this._uiHash() );
464+
// Cannot intersect with itself
465+
// no useless actions that have been done before
466+
// no action if the item moved is the parent of the item checked
467+
if ( itemElement !== this.currentItem[ 0 ] &&
468+
this.placeholder[ intersection === 1 ?
469+
"next" : "prev" ]()[ 0 ] !== itemElement &&
470+
!$.contains( this.placeholder[ 0 ], itemElement ) &&
471+
( this.options.type === "semi-dynamic" ?
472+
!$.contains( this.element[ 0 ], itemElement ) :
473+
true
474+
)
475+
) {
476+
477+
this.direction = intersection === 1 ? "down" : "up";
478+
479+
if ( this.options.tolerance === "pointer" ||
480+
this._intersectsWithSides( item ) ) {
481+
this._rearrange( event, item );
482+
} else {
492483
break;
493484
}
485+
486+
this._trigger( "change", event, this._uiHash() );
487+
break;
494488
}
495489
}
496490

491+
//Post events to containers
492+
this._contactContainers( event );
493+
497494
//Interconnect with droppables
498495
if ( $.ui.ddmanager ) {
499496
$.ui.ddmanager.drag( this, event );

0 commit comments

Comments
 (0)