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:
- By using the
useDraggableanduseDroppableReact Hooks in functional components. - By using the
DraggableandDroppablehigher-order KendoReact components in class components.
The following example demonstrates the Drag&Drop in action.
The example above showcases the Drag&Drop functionality—we 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.
The Drag&Drop is part of the KendoReact Common Utilities component library. The procedures for installing, importing, and using the Common Utilities are identical for all components in the package. To learn how to use the Drag&Drop and the rest of the Common Utilities, see the Getting Started with the KendoReact Common Utilities guide.
Key Features
- Auto Scroll—Automatically scroll the nearest scroll container when the dragged component is close to the edges.
- Drag Hint—Render a copy of the original element to be used as
hintduring dragging. - Drag Handle—Allow drag only through interacting with a specified
handlewhile still using the parent element fordropdetection. - Hold to Drag—Enable dragging after holding the drag element for a specific period of time.
- Minimum Distance—Display the
draghint after a a predefined distance is covered. - Axis lock—Enable dragging only on a single axis.
