KendoReact
The React Drag and Drop Utilities go well beyond the default HTML drag and drop functionality, offering a ton of useful event handlers, which you can use with plain HTML elements or even wrap around existing UI components to add drag and drop capabilities to any React app. It further enables you to create custom logic for drag and drop events. This includes the new Drag and Drop, Draggable and Droppable React components as well as the useDraggable and useDroppable hooks. This type of functionality is often used in file managers and customizable tile-based interfaces, such as planning boards. Using these components in combination will enable React developers to have the ultimate flexibility in implementing drag & drop functionality in their apps.
Auto-scroll is among the handy callbacks developers can use out-of-the-box with the KendoReact Drag and Drop Utilities. This feature solves the UX problem of having to drag an element to a part of the page visible only after scrolling as it causes the container to automatically scroll once a user drags an item close to its edge.
Building on top of the default React Drag and Drop functionality, you can easily handle many popular drag and drop scenarios, such as displaying a drag hint, visualizing a preview of the drop event, setting up a minimum distance required for dragging to begin, implementing drag steps and more. You can see demos of the feature applied in many possible use cases in the KendoReact Drag and Drop Utilities documentation.
There are two main ways to implement drag & drop functionality in your React application, using the KendoReact library:
- For functional components, use the `useDraggable` and `useDroppable` hooks.
- For class components, use the `Draggable` and `Droppable` higher-order KendoReact components.
Both approaches require the KendoReact Common Utilities package, which can be installed via npm. After installing the package, import the desired components into your React app. For more details, see the Drag&Drop Overview in the KendoReact documentation.
There are two main ways to allow for dragging and dropping of a native HTML image in your React app, using the KendoReact library.
1. For functional components, define a `ref` object by using the `React.useRef` hook. Then, attach that ref to the <img> element.
const element = React.useRef();
// ...
useDraggable(element, {});
// ...
return (
<img ref={element} src=”x”>
)
2. For class components, pass the desired element as a direct child of the `Draggable` component.
render() {
return (
<Draggable>
<img src="x">
</Draggable>
)
}
For more information, see “Getting Started with the Draggable Component” in the KendoReact docs.