To define an HTML element or an Angular component as a drop target, use the
DropTarget directive. The drop target element emits a number of events when a valid drag target (an element with the
DragTarget directive applied) interacts with it. You can entirely customize the logic that will be executed upon those interactions by binding to the following
dragEnter—Fires when a valid drag target enters the drop target.
dragOver—Fires while a valid drag target is being dragged over the drop target.
dragLeave—Fires when a valid drag target leaves the drop target.
drop—Fires when a valid drag target is dropped over the drop target.
The following example demonstrates the
DropTarget directive in action.