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

Events

Both the DragTarget and the DropTarget feature a number of events which enable you to control and completely customize the drag and drop behavior upon user interaction.

DragTarget Events

  • press—Fires when the drag target is pressed.
  • release—Fires when the drag target is released after being pressed.
  • dragStart—Fires when the dragging of the element begins. The event is preventable.
  • drag—Fires while the element is being dragged. The event is preventable.
  • dragEnd—Fires when the dragging of the element ends and the user releases it.

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 all events the Drag & Drop functionality features.

Example
View Source
Change Theme:

Preventable Events

The dragStart and drag events of the DragTarget are preventable. When a hint is provided and the dragStart event is prevented, the hint is not created. Preventing the drag event creates and destroys the hint but the user is not able to drag it.

Note that when the dragStart or drag events are prevented, the subsequent events will not be emitted.

The following example demonstrates preventing the drag event.

Example
View Source
Change Theme: