New to Kendo UI for Angular? Start a free 30-day trial

Drop Target

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 DropTarget events:

  • 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.

View Source
Change Theme:

In this article

Not finding the help you need?