Allow Drag and Drop from/to arbitrary areas

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.

首先查看 Angular CDK 的拖放 API，以及针对独立 cdkDrag 元素所描述的行为。当拖放列表外的 cdkDrag 能够在拖动开始时以及被放置到任意目标上时通知消费者，工作就完成了。