angular-materialangulardraganddroplists

Angular drag and drop: Items should not remove from container after drag and dropped


I am using Angular drag and drop CDK:

I am able to drag and drop items from one container to another and vice versa. Now, I am trying to not to remove a dropped item from a container, but it should be dropped into another container.

enter image description here

As you can see in the picture, I want to drag an item "Go home" from 'To do' container to 'Done' container.

I want to keep an item after dropped.

Example: https://stackblitz.com/angular/bypeyxpbvxe?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html

Any help, please...


Solution

  • This is quite easy. Just use copyArrayItem instead of transferArrayItem

    import {
      CdkDragDrop,
      copyArrayItem,
      moveItemInArray
    } from '@angular/cdk/drag-drop';
    
    drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
          moveItemInArray(
            event.container.data,
            event.previousIndex,
            event.currentIndex
          );
        } else {
          copyArrayItem(
            event.previousContainer.data,
            event.container.data,
            event.previousIndex,
            event.currentIndex
          );
        }
      }