KendoReact

React Drag&Drop Utilities

  • The powerful combination of the components in this package gives you the ultimate flexibility in implementing drag & drop functionality in your React apps.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

Overview

The React Drag&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 DragAndDrop, 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.

See React Drag & Drop Utilities demo

React Drag&Drop Utilities

Drag&Drop Auto-Scroll

Auto-scroll is among the handy callbacks developers can use out-of-the-box with the KendoReact Drag&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.

See React Drag&Drop Auto-Scroll demo

React Drag&Drop Auto-Scroll demo

Common Scenarios

Building on top of the default React Drag&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&Drop Utilities documentation.

See React Drag&Drop Drag Hint demo

React Drag&Drop Drag hint demo

React Drag&Drop Drag dropping

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.