search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

Allow Drag and Drop from/to arbitrary areas #13987

Open jtsom opened 5 years ago

jtsom commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

@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?