cdk-drop: allow drag-and-drop copy behavior

Bug, feature request, or proposal:

In some designs, you want to drag the same item repeatedly to multiple drop zones. In other words, the drag-and-drop system should support copy behavior as well as move behavior.

What is the expected behavior?

Developers should be able to choose whether a drag and drop acts as a move or a copy. This should be determined by the developer’s implementation of the (dropped) handler and how they manipulate container data.

What is the current behavior?

<cdk-drop> seems to assume move behavior and has hidden state that prevents the developer from achieving copy behavior. In the (dropped) handler, if the developer leaves a container.data item in the previousContainer, it can be dragged again as expected. However, on the next drag-and-drop event.previousIndex = -1 and event.previousContainer is the wrong cdk-drop

To clarify:

1. Drag item from cdk-drop source S to A
2. In (dropped) handler, insert the dragged data item into A’s data without removing it from S’s data
3. Drag same item from S to cdk-drop B
4. Problem: (dropped) event has event.previousIndex = -1 and event.previousContainer is cdk-drop A instead of cdk-drop S.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

I can create a demo if needed.

What is the use-case or motivation for changing an existing behavior?

The current <cdk-drop> behavior is restrictive and doesn’t allow for copy-drag designs.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 6.2.1
Node: 8.11.4
OS: linux x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.5
@angular-devkit/build-angular      0.7.5
@angular-devkit/build-optimizer    0.7.5
@angular-devkit/build-webpack      0.7.5
@angular-devkit/core               0.7.5
@angular-devkit/schematics         0.8.1
@angular/cdk                       6.4.7
@angular/cdk-experimental          6.4.7
@angular/cli                       6.2.1
@angular/flex-layout               6.0.0-beta.18
@angular/material                  6.4.7
@angular/material-moment-adapter   6.4.7
@ngtools/webpack                   6.1.5
@schematics/angular                0.8.1
@schematics/update                 0.8.1
rxjs                               6.2.2
typescript                         2.9.2
webpack                            4.9.2

Is there anything else we should know?

I worked-around this issue in my App by forcibly re-creating the <cdk-drop> within my template (toggle via *ngIf).

Also, in my app, I wanted to be able to drag items from the drop zones back to the source zone as a way of removing them. In this case, I remove the data item from the previousContainer.data but nothing in the destination container is changed. Again, I had issues with<cdk-drop> state and needed to apply my hack of re-generating the component.

[PetrosA]

Yes it copies the items correctly, but the UI is not fitting. In the drag event it pulls the item out of the sourceList and thats not the expected behavior. It will confuse the user. Some update to leave the copy item to his sourceList would be very helpful

[rajibhasan11]

Please provide similar behavior like https://jsfiddle.net/drzaus/mP8kY/ in cdk dnd