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

[arlowhite]

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.

[kanidjar]

Could my issue be related to yours? All i am trying is to "copy" new items to my dropzone.

#13077

[arlowhite]

@kanidjar seems like the same issue

Look at the (dropped) event properties container, containerIndex, previousContainer, previousIndex and compare them with what you expect. In my case some of these would be wrong after dragging an item a second time.

[kanidjar]

Confirmed. Using your workaround fixes my issue :)

[SAkhil95]

I am also facing the same issue,
I have 3 lists A,B and C where B and C will be my drop zones.
If items are moved from A then I cannot reuse the same item get pushed to other List. So, I guess drag and copy feature is required for to satisfy my requirement.
Any Suggestions / comments will be extremely helpful , Thank You.

[eden6]

When dropped inside B or C, you could temporarily call a method inside A that "resets" the array of items being displayed inside a timeout of 0 ms.
Something like:
this.items= []; setTimeout(() => { this.items= this.sourceItems.slice(); }, 0);

[crisbeto]

We used to have an issue where an item that was dragged into another container wasn't being reverted, however that has been resolved in 7.0.0-beta.1. What other issues are you running into?

[SAkhil95]

Hey @crisbeto and @eden6 , Thanks for your response.
I will take an example so that the issue I am facing will be conveyed in simple terms.
I have all my employees list in List A, I want to drag drop employees who will be awarded bonuses in Quarter 1 to List B and employees who will be awarded bonuses in Quarter 2 to List C, but there are some employees who will receive in both Q1 & Q2. If I use drag and move feature, I can use the element in only 1 List among B or C . So, I require drag copy behavior instead of drag move so that I can clone Employee X in List B as well as List C. I don't want Employee X to be moved only to either of List B or List C making it not possible to use in both the Lists.

Once again thanks a lot for your responses. 👍

[eden6]

@SAkhil95 That's what I had understood. I don't know if a copy will be implemented, but in the meantime if you catch the dropped event on containers B and C, you can reset the employees list displayed in A in order to get fresh items to drag again.
resetEmployeesList(){ this.employees= []; setTimeout(() => { this.employees= this.originalEmployeesList.slice(); }, 0); }
Hope this helps

[crisbeto]

@SAkhil95 are you also copying the object in your data model after the element has been dropped?

[SAkhil95]

I have created a simple Stack blitz demo , I just want the items in List A to be copied to List B rather than move.
Please find below:
https://stackblitz.com/edit/angular-rxypv6
Thank You.

[eden6]

Here's what I was talking about:
https://stackblitz.com/edit/angular-w5ftfu

[SAkhil95]

Yes @eden6 , this will certainly help me, Thanks a ton for the alternate solution mate.
Thanks @crisbeto, issue is now resolved with alternate solution provided by @eden6 .
Thank you both once again...

[crisbeto]

@eden6 you don't need to hack around it with timeouts and resetting the list. You just have to push the item to the new list without removing it from the old one: https://stackblitz.com/edit/angular-ymlmql. Closing the issue since this seems to work now.