10 Best Drag And Drop Components For React (2024 Update)

Want to have a drag and drop component to create draggable and movable elements (e.g. lists, cards, tables, etc) in your React app?

Here is a list of the 10 best drag and drop components that bind mouse drag and touch events to any component or view in your application. Have fun.

Originally Published Aug 14 2020, updated Mar 06 2024

Best Drag And Drop Components For React:

1. Draggable and Resizable Grid Layout For React

react-grid-layout

Demo Download

A draggable and resizable grid layout system with responsive breakpoints.


2. Draggable Scrollable Library For React

Draggable Scrollable Library For React

Draggable Scrollable Library For React

Demo Download

A React hook that adds draggable functionality to scrollable content.


3. dnd-kit

Drag & Drop Toolkit For React - dnd-kit

Demo Download

A modern, lightweight, performant, accessible, and extensible drag & drop toolkit for React.


4. React Beautiful Drag And Drop Component

React Beautiful Drag And Drop Component

React Beautiful Drag And Drop Component

Demo Download

Beautiful, accessible drag and drop for lists with React.js.


5. Drag & Drop List Component – react-movable

Drag & Drop List Component - react-movable

Demo Download

An accessible and tiny React component that provides the Drag and drop functionality for your React lists and tables.


6. React Nestable & Draggable Component

React Nestable & Draggable Component

React Nestable & Draggable Component

Demo Download

Drag & drop hierarchical list made as a react component.


7. Resizable and Draggable Component For React – react-rnd

react-rnd

Demo Download

react-rnd is a React component that makes any elements resizable and draggable.


8. Drag and Drop For React – React DnD

React DnD

React DnD

Demo Download

A set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.


9. React Component For Draggable Elements – drag-react

React Component For Draggable Elements

Demo Download

A React.js component for creating draggable elements. It makes it easy to grab the DOM element and manipulate its position using mouse and touch.


10. dnd

dnd

dnd

Demo Download

Beautiful and accessible drag and drop for lists with React.


More Resources:

There’re lots of web & mobile drag and drop libraries out there and you can find more React & React Native resources under our Drag And Drop category.

To learn more about Drag and Drop on modern web & mobile development, here are a few resources available online: