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 7 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 Apr 13 2022
Best Drag And Drop Components For React:
1. React Beautiful Drag And Drop Component
Beautiful, accessible drag and drop for lists with React.js.
2. Drag and Drop For React – React DnD
A set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.
3. React-Draggable
A simple component for making elements draggable.
4. dnd-kit
A modern, lightweight, performant, accessible, and extensible drag & drop toolkit for React.
5. Resizable and Draggable Component For React – react-rnd
react-rnd is a React component that makes any elements resizable and draggable.
6. Smooth Draggable & Sortable Library – react-smooth-dnd
A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios.
7. Drag & Drop List Component – react-movable
An accessible and tiny React component that provides the Drag and drop functionality for your React lists and tables.
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:
- 10 Best Drag And Drop JavaScript Libraries
- 7 Best Drag And Drop Components To Create Draggable Elements
- Best Advanced Drag And Drop Plugins In JavaScript