library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Sortable: Allow 0-height containers to be sortable as in 1.12.1

Browse Source 
Note that container specific events will not fire when the dragged element
is interacting with zero height containers.

Fixes gh-1998
Closes gh-2008

Co-authored-by: A. Wells <borgboyone@users.noreply.github.com>
This commit is contained in:
Michał Gołębiowski-Owczarek 2021-11-08 18:21:03 +01:00 committed by GitHub
parent 85fba3f107
commit efe3b22517
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 118 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
tests/unit/sortable/core.js
View File

@ -42,4 +42,57 @@ QUnit.test( "ui-sortable-handle applied to appropriate element", function( asser
assert.equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" );
} );
// gh-1998
QUnit.test( "drag & drop works with a zero-height container", function( assert ) {
var ready = assert.async();
assert.expect( 3 );
var el = $( "<ul class='list-gh-1998'>\n" +
" <style>" +
" .list-gh-1998 {\n" +
" margin: 0;\n" +
" padding: 0;\n" +
" }\n" +
" .list-item-gh-1998 {\n" +
" float: left;\n" +
" display: block;\n" +
" width: 100px;\n" +
" height: 100px;\n" +
" }\n" +
" </style>\n" +
" <li class='list-item-gh-1998'>Item 1</li>\n" +
" <li class='list-item-gh-1998'>Item 2</li>\n" +
" <li class='list-item-gh-1998'>Item 3</li>\n" +
"</ul>" )
.sortable()
.appendTo( "#qunit-fixture" );
function step1() {
el.find( "li" ).eq( 0 ).simulate( "drag", {
dx: 100,
dy: 3,
moves: 3
} );
setTimeout( step2 );
}
function step2() {
el.find( "li" ).eq( 2 ).simulate( "drag", {
dx: -200,
dy: -3,
moves: 3
} );
setTimeout( step3 );
}
function step3() {
assert.equal( el.find( "li" ).eq( 0 ).text(), "Item 3" );
assert.equal( el.find( "li" ).eq( 1 ).text(), "Item 2" );
assert.equal( el.find( "li" ).eq( 2 ).text(), "Item 1" );
ready();
}
step1();
} );
} );

137
ui/widgets/sortable.js
View File

@ -421,79 +421,76 @@ return $.widget( "ui.sortable", $.ui.mouse, {
this.helper[ 0 ].style.top = this.position.top + "px";
}
//Post events to containers
this._contactContainers( event );
//Do scrolling
if ( o.scroll ) {
if ( this._scroll( event ) !== false ) {
if ( this.innermostContainer !== null ) {
//Update item positions used in position checks
this._refreshItemPositions( true );
//Do scrolling
if ( o.scroll ) {
if ( this._scroll( event ) !== false ) {
//Update item positions used in position checks
this._refreshItemPositions( true );
if ( $.ui.ddmanager && !o.dropBehaviour ) {
$.ui.ddmanager.prepareOffsets( this, event );
}
}
}
this.dragDirection = {
vertical: this._getDragVerticalDirection(),
horizontal: this._getDragHorizontalDirection()
};
//Rearrange
for ( i = this.items.length - 1; i >= 0; i-- ) {
//Cache variables and intersection, continue if no intersection
item = this.items[ i ];
itemElement = item.item[ 0 ];
intersection = this._intersectsWithPointer( item );
if ( !intersection ) {
continue;
}
// Only put the placeholder inside the current Container, skip all
// items from other containers. This works because when moving
// an item from one container to another the
// currentContainer is switched before the placeholder is moved.
//
// Without this, moving items in "sub-sortables" can cause
// the placeholder to jitter between the outer and inner container.
if ( item.instance !== this.currentContainer ) {
continue;
}
// Cannot intersect with itself
// no useless actions that have been done before
// no action if the item moved is the parent of the item checked
if ( itemElement !== this.currentItem[ 0 ] &&
this.placeholder[ intersection === 1 ?
"next" : "prev" ]()[ 0 ] !== itemElement &&
!$.contains( this.placeholder[ 0 ], itemElement ) &&
( this.options.type === "semi-dynamic" ?
!$.contains( this.element[ 0 ], itemElement ) :
true
)
) {
this.direction = intersection === 1 ? "down" : "up";
if ( this.options.tolerance === "pointer" ||
this._intersectsWithSides( item ) ) {
this._rearrange( event, item );
} else {
break;
}
this._trigger( "change", event, this._uiHash() );
break;
if ( $.ui.ddmanager && !o.dropBehaviour ) {
$.ui.ddmanager.prepareOffsets( this, event );
}
}
}
this.dragDirection = {
vertical: this._getDragVerticalDirection(),
horizontal: this._getDragHorizontalDirection()
};
//Rearrange
for ( i = this.items.length - 1; i >= 0; i-- ) {
//Cache variables and intersection, continue if no intersection
item = this.items[ i ];
itemElement = item.item[ 0 ];
intersection = this._intersectsWithPointer( item );
if ( !intersection ) {
continue;
}
// Only put the placeholder inside the current Container, skip all
// items from other containers. This works because when moving
// an item from one container to another the
// currentContainer is switched before the placeholder is moved.
//
// Without this, moving items in "sub-sortables" can cause
// the placeholder to jitter between the outer and inner container.
if ( item.instance !== this.currentContainer ) {
continue;
}
// Cannot intersect with itself
// no useless actions that have been done before
// no action if the item moved is the parent of the item checked
if ( itemElement !== this.currentItem[ 0 ] &&
this.placeholder[ intersection === 1 ?
"next" : "prev" ]()[ 0 ] !== itemElement &&
!$.contains( this.placeholder[ 0 ], itemElement ) &&
( this.options.type === "semi-dynamic" ?
!$.contains( this.element[ 0 ], itemElement ) :
true
)
) {
this.direction = intersection === 1 ? "down" : "up";
if ( this.options.tolerance === "pointer" ||
this._intersectsWithSides( item ) ) {
this._rearrange( event, item );
} else {
break;
}
this._trigger( "change", event, this._uiHash() );
break;
}
}
//Post events to containers
this._contactContainers( event );
//Interconnect with droppables
if ( $.ui.ddmanager ) {
$.ui.ddmanager.drag( this, event );
@ -888,9 +885,7 @@ return $.widget( "ui.sortable", $.ui.mouse, {
this.options.axis === "x" || this._isFloating( this.items[ 0 ].item ) :
false;
if ( this.innermostContainer !== null ) {
this._refreshItemPositions( fast );
}
this._refreshItemPositions( fast );
var i, p;
@ -1038,8 +1033,6 @@ return $.widget( "ui.sortable", $.ui.mouse, {
}
this.innermostContainer = innermostContainer;
// If no intersecting containers found, return
if ( !innermostContainer ) {
return;