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.
Start Free Trial
The following example demonstrates the Drag and Drop functionality in action.
Change Theme
Theme
Loading ...
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 handlewhile 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
- Drag and Drop Homepage
- Getting Started with the Kendo UI for Angular Utilities
- API Reference of the DragTarget
- API Reference of the DropTarget
- API Reference of the DragHandle
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Virtual Classroom (Training Courses for Registered Users)
- Drag and Drop Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base