I have two lists, one with cdkDrag and the second list without cdkDrag. I want to drag item from list1 to list2(no draggable) and when the item dragged is dropped over an item of the list1 I want to know the index of this item. I have the index of the previousContainer but currentIndex of the final container is always 0. I'm using example code of Angular Material page:
HTML:
<div cdkDropListGroup>
<div class="example-container">
<h2>To do</h2>
<div
cdkDropList
[cdkDropListData]="todo"
class="example-list"
(cdkDropListDropped)="drop($event, 'todo')">
<div class="example-box" *ngFor="let item of todo; let i = index" >{{item}}</div>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div
cdkDropList
[cdkDropListData]="done"
class="example-list"
(cdkDropListDropped)="drop($event, 'done')">
<div class="example-box" *ngFor="let item of done; let i = index" cdkDrag [cdkDragData]="{item: item, index: i}">{{item}}</div>
</div>
</div>
</div>
TS:
export class AppComponent {
todo = ['Task 1', 'Task 2', 'Task 3'];
done = ['Completed Task 1', 'Completed Task 2'];
drop(event: any, targetList: string) {
console.log(event)
console.log(targetList)
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
const isDropInsideOtherItem = event.item.data.index !== event.currentIndex;
if (isDropInsideOtherItem) {
// Muestra el índice donde se soltó el elemento en el cuadro de diálogo u otra forma de visualización.
alert(`Dropped item '${event.item.data.item}' onto another item at index ${event.currentIndex}`);
} else {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
console.log(`Dropped item '${event.item.data.item}' into '${targetList}' at index ${event.currentIndex}`);
}
}
}
}
It's possible to get the currentIndex of the final list where I dropped the item? I only want to put on the array like an object property of an item but not in the view.
Thanks!