# Drop Target

A valid drop target is considered any HTML element or Angular component with the [`DropTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/api/droptargetdirective) directive applied. The drop target element emits a number of events when a valid drag target (an element with the [`DragTarget`](https://www.telerik.com/kendo-angular-ui/components/utils/api/dragtargetdirective) directive applied) interacts with it:

* [`onDragEnter`](https://www.telerik.com/kendo-angular-ui/components/utils/api/droptargetdirective#ondragenter)—Fires when a valid drag target enters the drop target.
* [`onDragOver`](https://www.telerik.com/kendo-angular-ui/components/utils/api/droptargetdirective#ondragover)—Fires while a valid drag target is being dragged over the drop target.
* [`onDragLeave`](https://www.telerik.com/kendo-angular-ui/components/utils/api/droptargetdirective#ondragleave)—Fires when a valid drag target leaves the drop target.
* [`onDrop`](https://www.telerik.com/kendo-angular-ui/components/utils/api/droptargetdirective#ondrop)—Fires when a valid drag target is dropped over the drop target.

The following example demonstrates the `DropTarget` directive in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/utils/draganddrop/droptarget/source.txt)

## Suggested Links

* [API Reference of the DropTarget](https://www.telerik.com/kendo-angular-ui/components/utils/api/droptargetdirective)