Drag&Drop Overview

The KendoReact Drag&Drop functionality provides an easy way to implement drag and drop of native HTML elements or custom React components.

Depending on the type of the targeted React components, you can implement the Drag&Drop in two ways:


The following example demonstrates the Drag&Drop in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

The example above showcases the Drag&Drop functionalitywe register an element as draggable and provide four possible droppable elements. Additionally, we apply a visual clue to the drop elements to show where a drop is possible.

To learn how import, install and use the useDraggable, useDroppable and their Class component alternatives, see the Getting Started with the KendoReact Drag&Drop guide.

Key Features

  • 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 drag only through interacting with a specified 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.
  • Minimum DistanceDisplay the drag hint after a a predefined distance is covered.
  • Axis lockEnable dragging only on a single axis.

In this article

Not finding the help you need?