Angular duplicate item via Drag & Drop

Question

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

pc_coder pc_coder · Accepted Answer · 2020-06-07T20:44:23

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; 
            });
    }

  }

Angular duplicate item via Drag & Drop

1 Answers