fix(drag-drop): don't move item in list if pointer is too far away

Currently the drop container will move an item in a list, no matter how far away the pointer is, as long as it overlaps another item along the proper axis. This can be annoying to users, because it can lead to unwanted re-arrangements of the list. These changes rework the logic so that the list is only re-arranged if the pointer is inside the drop container or within a buffer around it.

Author: crisbeto

src/cdk/drag-drop/drag.spec.ts

@@ -461,6 +461,41 @@ describe('CdkDrag', () => {
           .toEqual(['One', 'Two', 'Zero', 'Three']);
     }));
 
+    it('should not move items in a vertical list if the pointer is too far away', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+
+      expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
+          .toEqual(['Zero', 'One', 'Two', 'Three']);
+
+      const firstItem = dragItems.first;
+      const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect();
+
+      // Move the cursor all the way to the right so it doesn't intersect along the x axis.
+      dragElementViaMouse(fixture, firstItem.element.nativeElement,
+          thirdItemRect.right + 1000, thirdItemRect.top + 1);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+
+      const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+      // Assert the event like this, rather than `toHaveBeenCalledWith`, because Jasmine will
+      // go into an infinite loop trying to stringify the event, if the test fails.
+      expect(event).toEqual({
+        previousIndex: 0,
+        currentIndex: 0,
+        item: firstItem,
+        container: fixture.componentInstance.dropInstance,
+        previousContainer: fixture.componentInstance.dropInstance
+      });
+
+      expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
+          .toEqual(['Zero', 'One', 'Two', 'Three']);
+    }));
+
     it('should not move the original element from its initial DOM position', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
@@ -518,6 +553,41 @@ describe('CdkDrag', () => {
           .toEqual(['One', 'Two', 'Zero', 'Three']);
     }));
 
+    it('should not move items in a horizontal list if pointer is too far away', fakeAsync(() => {
+      const fixture = createComponent(DraggableInHorizontalDropZone);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+
+      expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
+          .toEqual(['Zero', 'One', 'Two', 'Three']);
+
+      const firstItem = dragItems.first;
+      const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect();
+
+      // Move the cursor all the way to the bottom so it doesn't intersect along the y axis.
+      dragElementViaMouse(fixture, firstItem.element.nativeElement,
+          thirdItemRect.left + 1, thirdItemRect.bottom + 1000);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+
+      const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+      // Assert the event like this, rather than `toHaveBeenCalledWith`, because Jasmine will
+      // go into an infinite loop trying to stringify the event, if the test fails.
+      expect(event).toEqual({
+        previousIndex: 0,
+        currentIndex: 0,
+        item: firstItem,
+        container: fixture.componentInstance.dropInstance,
+        previousContainer: fixture.componentInstance.dropInstance
+      });
+
+      expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
+          .toEqual(['Zero', 'One', 'Two', 'Three']);
+    }));
+
     it('should create a preview element while the item is dragged', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();

src/cdk/drag-drop/drop.ts

@@ -30,6 +30,12 @@ import {moveItemInArray} from './drag-utils';
 /** Counter used to generate unique ids for drop zones. */
 let _uniqueIdCounter = 0;
 
+/**
+ * Buffer, in percent of the width/height, to add around the drop container when
+ * determining whether an item should affect the list order.
+ */
+const DROP_BUFFER_PERCENTAGE = 5;
+
 /** Container that wraps a set of draggable items. */
 @Component({
   moduleId: module.id,
@@ -112,7 +118,8 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
   /** Cache of the dimensions of all the items and the sibling containers. */
   private _positionCache = {
     items: [] as {drag: CdkDrag, clientRect: ClientRect, offset: number}[],
-    siblings: [] as {drop: CdkDrop, clientRect: ClientRect}[]
+    siblings: [] as {drop: CdkDrop, clientRect: ClientRect}[],
+    self: {} as ClientRect
   };
 
   /**
@@ -215,6 +222,11 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
    * @param yOffset Position of the item along the Y axis.
    */
   _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void {
+    // Don't sort the item if it's out of range.
+    if (!this._isInRange(xOffset, yOffset)) {
+      return;
+    }
+
     const siblings = this._positionCache.items;
     const newIndex = this._getItemIndexFromPointerPosition(item, xOffset, yOffset);
 
@@ -321,6 +333,8 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
       .map(drop => typeof drop === 'string' ? this._dragDropRegistry.getDropContainer(drop)! : drop)
       .filter(drop => drop && drop !== this)
       .map(drop => ({drop, clientRect: drop.element.nativeElement.getBoundingClientRect()}));
+
+    this._positionCache.self = this.element.nativeElement.getBoundingClientRect();
   }
 
   /** Resets the container to its initial state. */
@@ -369,4 +383,19 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
           yOffset >= Math.floor(clientRect.top) && yOffset <= Math.floor(clientRect.bottom);
     });
   }
+
+  /**
+   * Checks whether the pointer coordinates are within range of the drop container.
+   * @param xOffset Coordinates along the X axis.
+   * @param yOffset Coordinates along the Y axis.
+   */
+  private _isInRange(xOffset: number, yOffset: number): boolean {
+    const {top, right, bottom, left, width, height} = this._positionCache.self;
+    const multiplier = DROP_BUFFER_PERCENTAGE / 100;
+    const xBuffer = width * multiplier;
+    const yBuffer = height * multiplier;
+
+    return yOffset > top - yBuffer && yOffset < bottom + yBuffer &&
+           xOffset > left - xBuffer && xOffset < right + xBuffer;
+  }
 }