Sortable: Adjust itemWithLeastDistance algorithm in _contactContainers to properly handle dragging items to the beginning and ends of lists. Fixes #9314 - Sortable: Items cannot be dragged directly into bottom position. Fixes #9381 - Sortable: Connected list placeholders have an inaccurate initial position

Author: kborchers

tests/unit/sortable/sortable.html

@@ -38,7 +38,7 @@
 		margin: 1px;
 		border-width: 0;
 	}
-	#sortable li{
+	#sortable li, #sortable2 li{
 		padding: 0;
 		margin: 0;
 		border-width: 0;
@@ -58,7 +58,15 @@ <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">
 
-<ul id="sortable">
+<ul id="sortable" class="connectWith">
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+	<li>Item 4</li>
+	<li>Item 5</li>
+</ul>
+
+<ul id="sortable2" class="connectWith">
 	<li>Item 1</li>
 	<li>Item 2</li>
 	<li>Item 3</li>

tests/unit/sortable/sortable_core.js

@@ -1,3 +1,19 @@
 /*
  * sortable_core.js
- */
+ */
+
+(function( $ ) {
+
+module( "sortable: core" );
+
+test( "#9314: Sortable: Items cannot be dragged directly into bottom position", function() {
+	expect( 1 );
+
+	var el = $( ".connectWith" ).sortable({
+			connectWith: ".connectWith"
+		});
+
+	TestHelpers.sortable.sort( $( "li", el[ 1 ] )[ 0 ], 0, -12, 5, "Dragging the sortable into connected sortable" );
+});
+
+})( jQuery );

ui/jquery.ui.sortable.js

@@ -799,7 +799,7 @@ $.widget("ui.sortable", $.ui.mouse, {
 	},
 
 	_contactContainers: function(event) {
-		var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, base, cur, nearBottom, floating,
+		var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, cur, nearBottom, floating, axis,
 			innermostContainer = null,
 			innermostIndex = null;
 
@@ -850,26 +850,25 @@ $.widget("ui.sortable", $.ui.mouse, {
 			floating = innermostContainer.floating || this._isFloating(this.currentItem);
 			posProperty = floating ? "left" : "top";
 			sizeProperty = floating ? "width" : "height";
-			base = this.positionAbs[posProperty] + this.offset.click[posProperty];
+			axis = floating ? "clientX" : "clientY";
+
 			for (j = this.items.length - 1; j >= 0; j--) {
 				if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) {
 					continue;
 				}
 				if(this.items[j].item[0] === this.currentItem[0]) {
 					continue;
 				}
-				if (floating && !this._isOverAxis(this.positionAbs.top + this.offset.click.top, this.items[j].top, this.items[j].height)) {
-					continue;
-				}
+
 				cur = this.items[j].item.offset()[posProperty];
 				nearBottom = false;
-				if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)){
+				if ( event[ axis ] - cur > this.items[ j ][ sizeProperty ] / 2 ) {
 					nearBottom = true;
-					cur += this.items[j][sizeProperty];
 				}
 
-				if(Math.abs(cur - base) < dist) {
-					dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
+				if ( Math.abs( event[ axis ] - cur ) < dist ) {
+					dist = Math.abs( event[ axis ] - cur );
+					itemWithLeastDistance = this.items[ j ];
 					this.direction = nearBottom ? "up": "down";
 				}
 			}