Components: Allow Drag and Drop from/to arbitrary areas

[jtsom]

Bug, feature request, or proposal:

Dragging and dropping in a cdkDropList is nice, but we need the ability to set an element as a cdkDrag element, and be able to drag that element onto an arbitrary drop zone/target. Currently, there is no way to know if a cdkDrag that is not part of a drop list is dragged - there aren't any "drag start", "drag end/dropped" events.

What is the expected behavior?

Be able to be notified when a cdkDrag element that is not within a drop list is dragged and dropped.

What is the current behavior?

Not the above.

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

Be able to drag elements from a list / grid onto a target area, not necessarily moving the item, but to at least be notified when it is dropped into the target, in order to do something (play a sound or animation, etc.)

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

Angular 7.0.2
Material 7.0.2
All browsers.

[fabioemoutinho]

I have a similar issue that this would solve.
I want to be able to show a second container (cdkDropList) only when user starts dragging an item.
However, if I use [hidden] or *ngIf to show the second container (callback triggered by cdkDragStarted), I can't drop the item in the container.
Anyone knows how to solve this?

[andreypelykh]

@fabioemoutinho It is not possible to drop an element in previously hidden cdkDropList.
Here is related StackOverflow question https://stackoverflow.com/questions/59357985/cant-drop-element-in-previously-hidden-cdkdroplist
with an example https://stackblitz.com/edit/hidden-drop-zone
Does anyone know a workaround?