The KendoReact Drag&Drop functionality provides an easy way to implement
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
useDroppableReact Hooks in functional components.
- By using the
Droppablehigher-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
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.
- 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
- Drag Handle—Allow drag only through interacting with a specified
handlewhile still using the parent element for
- 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.