1

I am using the Angular CDK drag-drop (Material UI) and I want to get the current index of the dragged item in the CdkDragMove event object. Can anyone guide me?

Mohammad Yasrebi
  • 13
  • 5

1 Answers1

0

if you use *ngFor for iterating over list, you can use index variable of NgFor context.

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies; let i = index" 
  (cdkDragMoved)="move($event, i)" cdkDrag>{{movie}}</div>
</div>
Mehdi Shakeri
  • 584
  • 3
  • 11
  • 1
    It returns only the previous index and does not update when I move to the new index. For example, if you add console.log(i) in the move method, it logs always the same value – Mohammad Yasrebi Apr 07 '21 at 13:55
  • 2
    you can use `(cdkDropListSorted)` on `cdkDropList ` and use `currentIndex` or `previousIndex` on `CdkDragSortEvent` object – Mehdi Shakeri Apr 07 '21 at 14:02
  • Consider changing the answer by the real answer please. – Foxhunt Feb 17 '22 at 01:28