Kendo UI for Angular Drag and Drop Overview

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

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

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

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

View Source
Change Theme:

Key Features

  • Drag TargetDefine any DOM element or an Angular component as a drag target.
  • Drop TargetDefine any DOM element or an Angular component as a drop target.
  • Auto scrollAutomatically scroll the nearest scroll container when the dragged component is close to the edges.
  • Drag HintRender a copy of the original element to be used as hint during dragging.
  • Drag HandleAllow dragging only through interaction with a specified drag handle while still using the parent element for drop detection.
  • Hold to dragEnable dragging after holding the drag element for a specific period of time.
  • Axis lockEnable dragging only on a single axis.
  • Minimum distanceStart the drag only after a predefined distance is covered.

In this article

Not finding the help you need?