'Angular duplicate item via Drag & Drop

Scenario

In my current project (Angular 8) I want to add items from a source list to a target list by using the Angular CDK Drag & Drop-Module. The item should still appear inside the source list after this interaction.

The problem

After checking out the examples it looked pretty straightforward. Inside the drop-Event I've replaced transferArrayItem() with copyArrayItem(), however I want to keep the dragged item inside the source list even while dragging.

To provide you a simplified overview I've forked an official example by Google and changed the handling of the drop-Event to illustrate the issue (1).

Do you have any idea how to accomplish this behaviour?

1) https://stackblitz.com/edit/angular-chaxhv

Solution 1:^[1]

Demo try this

drop(event: CdkDragDrop<string[]>) {
    var self=this;
    if (event.previousContainer === event.container) {    
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }
    else if(event.container.id<event.previousContainer.id){
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex); 

       this.todo=this.todo.filter(function(item, pos){
                  return self.todo.indexOf(item)== pos; 
                });
    }
    else {
      copyArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex); 
     this.done=this.done.filter(function(item, pos){
              return self.done.indexOf(item)== pos; 
            });
    }

  }

Solution 2:^[2]

.cdk-drag-placeholder {
  opacity: 0;
}

Remove this css from the demo and it will be working fine you do have to use copyArrayItem

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mr. pc_coder
Solution 2	gamble4846

'Angular duplicate item via Drag & Drop

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]