Want to have a drag and drop component to create draggable and movable elements (e.g. lists, cards, tables, etc) in your React & React Native app?
Here is a list of 10 best drag and drop components that bind mouse drag and touch events to any component or view in your application. Have fun.
Table Of Contents:
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. Resizable and Draggable Component For React – react-rnd
react-rnd is a React component that makes any elements resizable and draggable.
4. 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.
5. 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.
Best Drag And Drop Components For React Native:
1. react-native-sortable-listview
Drag drop capable wrapper of ListView for React Native. Allows for dragging and dropping of rows with automatic scrolling while dragging.
2. React Native Draggable FlatList
A drag-and-drop-enabled FlatList component for React Native.
3. react-native-drag-sort
Drag and drop sort control for React Native.
4. Drag And Drop Library For React Native
A React Native library which helps you create draggable elements on the mobile app.
5. React Native Easy Gestures
React Native Gestures. Support: Drag, Scale and Rotate a Component.
More Resources:
There’re lots of web & mobile drag and drop libraries out there and you can find more React & React Native resources on our Drag And Drop category.
To learn more about Drag and Drop on modern web & mobile development, here are a few resources available online: