Skip to content

Commit b52ee40

Browse files
authored
Sortable: Fix positioning when moving a Draggable item into a Sortable
PR gh-1793 removed setting `this.offset.parent` in the Draggable `refreshPositions` method which broke position calculations when moving a Draggable item into a connected Sortable. restore that assignment. Ref gh-1793 Fixes gh-2001 Closes gh-2009
1 parent efe3b22 commit b52ee40

File tree

2 files changed

+63
-0
lines changed

2 files changed

+63
-0
lines changed

tests/unit/sortable/options.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -488,6 +488,63 @@ QUnit.test( "{ placholder: String } tbody", function( assert ) {
488488
} );
489489
} );
490490

491+
// gh-2001
492+
// Sortable: Draggable items moved into a sortable had incorrect position
493+
QUnit.test( "{ connectToSortable: Selector } positioning (gh-2001)", function( assert ) {
494+
assert.expect( 1 );
495+
496+
// Code from jQuery Simulate with minor modifications.
497+
function findCenter( elem ) {
498+
var offset,
499+
document = $( elem[ 0 ].ownerDocument );
500+
offset = elem.offset();
501+
502+
return {
503+
x: Math.floor( offset.left + elem.outerWidth() / 2 - document.scrollLeft() ),
504+
y: Math.floor( offset.top + elem.outerHeight() / 2 - document.scrollTop( ) )
505+
};
506+
}
507+
508+
var sortableElem = $( "#sortable" );
509+
510+
sortableElem.css( "position", "relative" );
511+
512+
var item = $( "<div></div>" )
513+
.text( "6" )
514+
.insertBefore( "#sortable" );
515+
516+
// Padding
517+
$( "<div></div>" )
518+
.css( {
519+
width: "100px",
520+
height: "100px"
521+
} )
522+
.insertBefore( "#sortable" );
523+
524+
item.draggable( {
525+
connectToSortable: "#sortable"
526+
} );
527+
sortableElem.sortable();
528+
529+
// Simulate a drag without a drop.
530+
var center = findCenter( item );
531+
item.simulate( "mousedown", {
532+
clientX: center.x,
533+
clientY: center.y
534+
} );
535+
item.simulate( "mousemove", {
536+
clientX: center.x,
537+
clientY: center.y + 60
538+
} );
539+
item.simulate( "mousemove", {
540+
clientX: center.x,
541+
clientY: center.y + 120
542+
} );
543+
544+
assert.ok( item.offset().top > sortableElem.children().eq( 0 ).offset().top,
545+
"Draggable offset correct after moving into a sortable" );
546+
} );
547+
491548
/*
492549
Test("{ revert: false }, default", function() {
493550
ok(false, "missing test - untested code is broken code.");

ui/widgets/sortable.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -885,6 +885,12 @@ return $.widget( "ui.sortable", $.ui.mouse, {
885885
this.options.axis === "x" || this._isFloating( this.items[ 0 ].item ) :
886886
false;
887887

888+
// This has to be redone because due to the item being moved out/into the offsetParent,
889+
// the offsetParent's position will change
890+
if ( this.offsetParent && this.helper ) {
891+
this.offset.parent = this._getParentOffset();
892+
}
893+
888894
this._refreshItemPositions( fast );
889895

890896
var i, p;

0 commit comments

Comments
 (0)