feat(drag-drop): indicate in dropped event whether item was dropped outside of container

Adds an extra flag on the `CdkDragDrop` event that indicates whether the user's pointer was over the container when they dropped an item.

Fixes #14136.

Author: crisbeto

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

@@ -53,6 +53,8 @@ export interface CdkDragDrop<T, O = T> {
   container: CdkDropListContainer<T>;
   /** Container from which the item was picked up. Can be the same as the `container`. */
   previousContainer: CdkDropListContainer<O>;
+  /** Whether the user's pointer was over the container when the item was dropped. */
+  isPointerOverContainer: boolean;
 }
 
 /** Event emitted as the user is dragging a draggable item. */

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

@@ -691,13 +691,55 @@ describe('CdkDrag', () => {
         currentIndex: 2,
         item: firstItem,
         container: fixture.componentInstance.dropInstance,
-        previousContainer: fixture.componentInstance.dropInstance
+        previousContainer: fixture.componentInstance.dropInstance,
+        isPointerOverContainer: true
       });
 
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
           .toEqual(['One', 'Two', 'Zero', 'Three']);
     }));
 
+    it('should expose whether an item was dropped over a container', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+      const firstItem = dragItems.first;
+      const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect();
+
+      dragElementViaMouse(fixture, firstItem.element.nativeElement,
+          thirdItemRect.left + 1, thirdItemRect.top + 1);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+
+      const event: CdkDragDrop<any> =
+          fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+      expect(event.isPointerOverContainer).toBe(true);
+    }));
+
+    it('should expose whether an item was dropped outside of a container', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+      const firstItem = dragItems.first;
+      const containerRect = fixture.componentInstance.dropInstance.element
+          .nativeElement.getBoundingClientRect();
+
+      dragElementViaMouse(fixture, firstItem.element.nativeElement,
+          containerRect.right + 10, containerRect.bottom + 10);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+
+      const event: CdkDragDrop<any> =
+          fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+      expect(event.isPointerOverContainer).toBe(false);
+    }));
+
     it('should dispatch the `sorted` event as an item is being sorted', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
@@ -756,7 +798,8 @@ describe('CdkDrag', () => {
         currentIndex: 0,
         item: firstItem,
         container: fixture.componentInstance.dropInstance,
-        previousContainer: fixture.componentInstance.dropInstance
+        previousContainer: fixture.componentInstance.dropInstance,
+        isPointerOverContainer: false
       });
 
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -813,7 +856,8 @@ describe('CdkDrag', () => {
         currentIndex: 2,
         item: firstItem,
         container: fixture.componentInstance.dropInstance,
-        previousContainer: fixture.componentInstance.dropInstance
+        previousContainer: fixture.componentInstance.dropInstance,
+        isPointerOverContainer: true
       });
 
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -852,7 +896,8 @@ describe('CdkDrag', () => {
         currentIndex: 2,
         item: firstItem,
         container: fixture.componentInstance.dropInstance,
-        previousContainer: fixture.componentInstance.dropInstance
+        previousContainer: fixture.componentInstance.dropInstance,
+        isPointerOverContainer: true
       });
 
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -887,7 +932,8 @@ describe('CdkDrag', () => {
         currentIndex: 0,
         item: firstItem,
         container: fixture.componentInstance.dropInstance,
-        previousContainer: fixture.componentInstance.dropInstance
+        previousContainer: fixture.componentInstance.dropInstance,
+        isPointerOverContainer: false
       });
 
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1699,7 +1745,8 @@ describe('CdkDrag', () => {
           currentIndex: 3,
           item,
           container: fixture.componentInstance.dropInstances.toArray()[1],
-          previousContainer: fixture.componentInstance.dropInstances.first
+          previousContainer: fixture.componentInstance.dropInstances.first,
+          isPointerOverContainer: true
         });
       }));
 
@@ -1800,7 +1847,8 @@ describe('CdkDrag', () => {
         currentIndex: 3,
         item: groups[0][1],
         container: dropInstances[1],
-        previousContainer: dropInstances[0]
+        previousContainer: dropInstances[0],
+        isPointerOverContainer: true
       });
     }));
 
@@ -1829,7 +1877,8 @@ describe('CdkDrag', () => {
           currentIndex: 1,
           item: groups[0][1],
           container: dropInstances[0],
-          previousContainer: dropInstances[0]
+          previousContainer: dropInstances[0],
+          isPointerOverContainer: false
         });
       }));
 
@@ -1858,7 +1907,8 @@ describe('CdkDrag', () => {
           currentIndex: 1,
           item: groups[0][1],
           container: dropInstances[0],
-          previousContainer: dropInstances[0]
+          previousContainer: dropInstances[0],
+          isPointerOverContainer: false
         });
       }));
 
@@ -1980,7 +2030,8 @@ describe('CdkDrag', () => {
         currentIndex: 3,
         item: groups[0][1],
         container: dropInstances[1],
-        previousContainer: dropInstances[0]
+        previousContainer: dropInstances[0],
+        isPointerOverContainer: true
       });
     }));
 
@@ -2005,7 +2056,8 @@ describe('CdkDrag', () => {
         currentIndex: 3,
         item: groups[0][1],
         container: dropInstances[1],
-        previousContainer: dropInstances[0]
+        previousContainer: dropInstances[0],
+        isPointerOverContainer: true
       });
     }));
 
@@ -2035,7 +2087,8 @@ describe('CdkDrag', () => {
         currentIndex: 3,
         item: groups[0][1],
         container: dropInstances[1],
-        previousContainer: dropInstances[0]
+        previousContainer: dropInstances[0],
+        isPointerOverContainer: true
       });
     }));
 
@@ -2069,7 +2122,8 @@ describe('CdkDrag', () => {
         currentIndex: 0,
         item,
         container: fixture.componentInstance.dropInstances.toArray()[1],
-        previousContainer: fixture.componentInstance.dropInstances.first
+        previousContainer: fixture.componentInstance.dropInstances.first,
+        isPointerOverContainer: true
       });
 
       expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
@@ -2516,7 +2570,7 @@ function dragElementViaMouse(fixture: ComponentFixture<any>,
   dispatchMouseEvent(document, 'mousemove', x, y);
   fixture.detectChanges();
 
-  dispatchMouseEvent(document, 'mouseup');
+  dispatchMouseEvent(document, 'mouseup', x, y);
   fixture.detectChanges();
 }
 
@@ -2555,7 +2609,7 @@ function dragElementViaTouch(fixture: ComponentFixture<any>,
   dispatchTouchEvent(document, 'touchmove', x, y);
   fixture.detectChanges();
 
-  dispatchTouchEvent(document, 'touchend');
+  dispatchTouchEvent(document, 'touchend', x, y);
   fixture.detectChanges();
 }
 

src/cdk/drag-drop/drag.ts

@@ -474,7 +474,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
   }
 
   /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */
-  private _pointerUp = () => {
+  private _pointerUp = (event: MouseEvent | TouchEvent) => {
     if (!this._isDragging()) {
       return;
     }
@@ -496,11 +496,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
       return;
     }
 
-    this._animatePreviewToPlaceholder().then(() => this._cleanupDragArtifacts());
+    this._animatePreviewToPlaceholder().then(() => this._cleanupDragArtifacts(event));
   }
 
   /** Cleans up the DOM artifacts that were added to facilitate the element being dragged. */
-  private _cleanupDragArtifacts() {
+  private _cleanupDragArtifacts(event: MouseEvent | TouchEvent) {
     // Restore the element's visibility and insert it at its old position in the DOM.
     // It's important that we maintain the position, because moving the element around in the DOM
     // can throw off `NgFor` which does smart diffing and re-creates elements only when necessary,
@@ -519,16 +519,19 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
     // Re-enter the NgZone since we bound `document` events on the outside.
     this._ngZone.run(() => {
       const currentIndex = this.dropContainer.getItemIndex(this);
+      const {x, y} = this._getPointerPositionOnPage(event);
+      const isPointerOverContainer = this.dropContainer._isOverContainer(x, y);
 
       this.ended.emit({source: this});
       this.dropped.emit({
         item: this,
         currentIndex,
         previousIndex: this._initialContainer.getItemIndex(this),
         container: this.dropContainer,
-        previousContainer: this._initialContainer
+        previousContainer: this._initialContainer,
+        isPointerOverContainer
       });
-      this.dropContainer.drop(this, currentIndex, this._initialContainer);
+      this.dropContainer.drop(this, currentIndex, this._initialContainer, isPointerOverContainer);
       this.dropContainer = this._initialContainer;
     });
   }
@@ -542,11 +545,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
     let newContainer = this.dropContainer._getSiblingContainerFromPosition(this, x, y);
 
     // If we couldn't find a new container to move the item into, and the item has left it's
-    // initial container, check whether the it's allowed to return into its original container.
-    // This handles the case where two containers are connected one way and the user tries to
-    // undo dragging an item into a new container.
+    // initial container, check whether the it's over the initial container. This handles the
+    // case where two containers are connected one way and the user tries to undo dragging an
+    // item into a new container.
     if (!newContainer && this.dropContainer !== this._initialContainer &&
-        this._initialContainer._canReturnItem(x, y)) {
+        this._initialContainer._isOverContainer(x, y)) {
       newContainer = this._initialContainer;
     }
 

src/cdk/drag-drop/drop-list-container.ts

@@ -34,8 +34,11 @@ export interface CdkDropListContainer<T = any> {
    * @param item Item being dropped into the container.
    * @param currentIndex Index at which the item should be inserted.
    * @param previousContainer Container from which the item got dragged in.
+   * @param isPointerOverContainer Whether the user's pointer was over the
+   *    container when the item was dropped.
    */
-  drop(item: CdkDrag, currentIndex: number, previousContainer?: CdkDropListContainer): void;
+  drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropListContainer,
+        isPointerOverContainer: boolean): void;
 
   /**
    * Emits an event to indicate that the user moved an item into the container.
@@ -60,7 +63,7 @@ export interface CdkDropListContainer<T = any> {
   _draggables: QueryList<CdkDrag>;
   _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number):
       CdkDropListContainer | null;
-  _canReturnItem(x: number, y: number): boolean;
+  _isOverContainer(x: number, y: number): boolean;
 }
 
 /**

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

@@ -199,16 +199,19 @@ export class CdkDropList<T = any> implements OnInit, OnDestroy {
    * @param item Item being dropped into the container.
    * @param currentIndex Index at which the item should be inserted.
    * @param previousContainer Container from which the item got dragged in.
+   * @param isPointerOverContainer Whether the user's pointer was over the
+   *    container when the item was dropped.
    */
-  drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropList): void {
+  drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropList,
+    isPointerOverContainer: boolean): void {
     this._reset();
     this.dropped.emit({
       item,
       currentIndex,
       previousIndex: previousContainer.getItemIndex(item),
       container: this,
-      // TODO(crisbeto): reconsider whether to make this null if the containers are the same.
-      previousContainer
+      previousContainer,
+      isPointerOverContainer
     });
   }
 
@@ -375,12 +378,11 @@ export class CdkDropList<T = any> implements OnInit, OnDestroy {
   }
 
   /**
-   * Checks whether an item that started in this container can be returned to it,
-   * after it was moved out into another container.
-   * @param x Position of the item along the X axis.
-   * @param y Position of the item along the Y axis.
+   * Checks whether the user's pointer is positioned over the container.
+   * @param x Pointer position along the X axis.
+   * @param y Pointer position along the Y axis.
    */
-  _canReturnItem(x: number, y: number): boolean {
+  _isOverContainer(x: number, y: number): boolean {
     return isInsideClientRect(this._positionCache.self, x, y);
   }