refactor(drag-drop): add current index to entered event (#15932)

Adds the index at which the item entered a new container to the `entered` events.

Fixes #15924.

Author: crisbeto

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

@@ -25,7 +25,7 @@ import {DOCUMENT} from '@angular/common';
 import {of as observableOf} from 'rxjs';
 
 import {DragDropModule} from '../drag-drop-module';
-import {CdkDragDrop} from '../drag-events';
+import {CdkDragDrop, CdkDragEnter} from '../drag-events';
 import {DragRefConfig, Point} from '../drag-ref';
 import {extendStyles} from '../drag-styling';
 import {moveItemInArray} from '../drag-utils';
@@ -3253,6 +3253,32 @@ describe('CdkDrag', () => {
                  'cdk-drop-list-dragging',
                  'Expected target to have dragging class once item has been moved over.');
        }));
+
+    it('should dispatch an event when an item enters a new container', fakeAsync(() => {
+      const fixture = createComponent(ConnectedDropZones);
+      fixture.detectChanges();
+
+      const groups = fixture.componentInstance.groupedDragItems;
+      const item = groups[0][1];
+      const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
+
+      startDraggingViaMouse(fixture, item.element.nativeElement);
+
+      dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
+      fixture.detectChanges();
+
+      const containerEnterEvent = fixture.componentInstance.enteredSpy.calls.mostRecent().args[0];
+      const itemEnterEvent = fixture.componentInstance.itemEnteredSpy.calls.mostRecent().args[0];
+      const expectedEvent: CdkDragEnter = {
+        container: fixture.componentInstance.dropInstances.toArray()[1],
+        item: item,
+        currentIndex: 2
+      };
+
+      expect(containerEnterEvent).toEqual(expectedEvent);
+      expect(itemEnterEvent).toEqual(expectedEvent);
+    }));
+
   });
 });
 
@@ -3548,25 +3574,40 @@ class DraggableInDropZoneWithCustomPlaceholder {
       #todoZone="cdkDropList"
       [cdkDropListData]="todo"
       [cdkDropListConnectedTo]="[doneZone]"
-      (cdkDropListDropped)="droppedSpy($event)">
-      <div [cdkDragData]="item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+      (cdkDropListDropped)="droppedSpy($event)"
+      (cdkDropListEntered)="enteredSpy($event)">
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        *ngFor="let item of todo"
+        cdkDrag>{{item}}</div>
     </div>
 
     <div
       cdkDropList
       #doneZone="cdkDropList"
       [cdkDropListData]="done"
       [cdkDropListConnectedTo]="[todoZone]"
-      (cdkDropListDropped)="droppedSpy($event)">
-      <div [cdkDragData]="item" *ngFor="let item of done" cdkDrag>{{item}}</div>
+      (cdkDropListDropped)="droppedSpy($event)"
+      (cdkDropListEntered)="enteredSpy($event)">
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        *ngFor="let item of done"
+        cdkDrag>{{item}}</div>
     </div>
 
     <div
       cdkDropList
       #extraZone="cdkDropList"
       [cdkDropListData]="extra"
-      (cdkDropListDropped)="droppedSpy($event)">
-      <div [cdkDragData]="item" *ngFor="let item of extra" cdkDrag>{{item}}</div>
+      (cdkDropListDropped)="droppedSpy($event)"
+      (cdkDropListEntered)="enteredSpy($event)">
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        *ngFor="let item of extra"
+        cdkDrag>{{item}}</div>
     </div>
   `
 })
@@ -3579,6 +3620,8 @@ class ConnectedDropZones implements AfterViewInit {
   done = ['Four', 'Five', 'Six'];
   extra = [];
   droppedSpy = jasmine.createSpy('dropped spy');
+  enteredSpy = jasmine.createSpy('entered spy');
+  itemEnteredSpy = jasmine.createSpy('item entered spy');
 
   ngAfterViewInit() {
     this.dropInstances.forEach((dropZone, index) => {

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

@@ -355,7 +355,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     ref.entered.subscribe(event => {
       this.entered.emit({
         container: event.container.data,
-        item: this
+        item: this,
+        currentIndex: event.currentIndex
       });
     });
 

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

@@ -313,7 +313,8 @@ export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentI
     ref.entered.subscribe(event => {
       this.entered.emit({
         container: this,
-        item: event.item.data
+        item: event.item.data,
+        currentIndex: event.currentIndex
       });
     });
 

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

@@ -33,6 +33,8 @@ export interface CdkDragEnter<T = any, I = T> {
   container: CdkDropList<T>;
   /** Item that was removed from the container. */
   item: CdkDrag<I>;
+  /** Index at which the item has entered the container. */
+  currentIndex: number;
 }
 
 /**

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

@@ -236,7 +236,7 @@ export class DragRef<T = any> {
   ended = new Subject<{source: DragRef}>();
 
   /** Emits when the user has moved the item into a new container. */
-  entered = new Subject<{container: DropListRef, item: DragRef}>();
+  entered = new Subject<{container: DropListRef, item: DragRef, currentIndex: number}>();
 
   /** Emits when the user removes the item its container by dragging it into another container. */
   exited = new Subject<{container: DropListRef, item: DragRef}>();
@@ -772,9 +772,13 @@ export class DragRef<T = any> {
         this.exited.next({item: this, container: this._dropContainer!});
         this._dropContainer!.exit(this);
         // Notify the new container that the item has entered.
-        this.entered.next({item: this, container: newContainer!});
         this._dropContainer = newContainer!;
         this._dropContainer.enter(this, x, y);
+        this.entered.next({
+          item: this,
+          container: newContainer!,
+          currentIndex: newContainer!.getItemIndex(this)
+        });
       });
     }
 

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

@@ -81,7 +81,7 @@ export class DropListRef<T = any> {
   /**
    * Emits when the user has moved a new drag item into this container.
    */
-  entered = new Subject<{item: DragRef, container: DropListRef}>();
+  entered = new Subject<{item: DragRef, container: DropListRef, currentIndex: number}>();
 
   /**
    * Emits when the user removes an item from the container
@@ -187,7 +187,6 @@ export class DropListRef<T = any> {
    * @param pointerY Position of the item along the Y axis.
    */
   enter(item: DragRef, pointerX: number, pointerY: number): void {
-    this.entered.next({item, container: this});
     this.start();
 
     // If sorting is disabled, we want the item to return to its starting
@@ -235,6 +234,7 @@ export class DropListRef<T = any> {
     // Note that the positions were already cached when we called `start` above,
     // but we need to refresh them since the amount of items has changed.
     this._cacheItemPositions();
+    this.entered.next({item, container: this, currentIndex: this.getItemIndex(item)});
   }
 
   /**

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -64,6 +64,7 @@ export interface CdkDragEnd<T = any> {
 
 export interface CdkDragEnter<T = any, I = T> {
     container: CdkDropList<T>;
+    currentIndex: number;
     item: CdkDrag<I>;
 }
 
@@ -229,6 +230,7 @@ export declare class DragRef<T = any> {
     entered: Subject<{
         container: DropListRef;
         item: DragRef<any>;
+        currentIndex: number;
     }>;
     exited: Subject<{
         container: DropListRef;
@@ -294,6 +296,7 @@ export declare class DropListRef<T = any> {
     entered: Subject<{
         item: DragRef;
         container: DropListRef<any>;
+        currentIndex: number;
     }>;
     exited: Subject<{
         item: DragRef;