Components / Utilities / Drag and Drop / Overview / 

Kendo UI for Angular Drag and Drop Overview

The Kendo UI for Angular Drag and Drop functionality helps to facilitate moving items within an Angular application.

The provided functionality allows the user to define any HTML element or Angular component as either drag or drop target. Customization of the interaction between targets could be achieved by utilizing a wide range of exposed properties and events.

The Drag and Drop Component is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free Trial

The following example demonstrates the Drag and Drop functionality in action.

Example
View Source
Change Theme:

Key Features

  • Drag Target—Define any HTML element or an Angular component as a drag target.
  • Drop Target—Define any HTML element or an Angular component as a drop target.
  • Drag Target Container—Defines multiple HTML elements or Angular components within a container as drag targets.
  • Drop Target Container—Defines multiple HTML elements or Angular components within a container as drop targets.
  • Auto scroll—Automatically scroll the nearest scrollable container when the dragged component is close to the edges.
  • Drag Hint—Render a copy of the original element (or a custom element) as hint during dragging.
  • Drag Handle—Allow dragging only through interaction with a specified drag handle while still using the parent element for drop detection.
  • Hold to drag—Enable dragging after holding the drag element for a specific period of time.
  • Axis lock—Force dragging only on the horizontal or vertical axis.
  • Minimum distance—Start dragging only after the pointer covers a predefined distance.

Support and Learning Resources

Additional Resources

Previous
Getting Started
Next
Drag Target

In this article

Not finding the help you need?

Contact Support