Drag item into list no draggable angular mat-list

15 Views Asked by At

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!

0

There are 0 best solutions below