10 Best Drag And Drop Components For React & React Native

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

React Beautiful Drag And Drop Component

Demo Download

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


2. Drag and Drop For React – 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.


3. 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.


4. Smooth Draggable & Sortable Library – react-smooth-dnd

Smooth Draggable & Sortable Library - react-smooth-dnd

Demo Download

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

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.


Best Drag And Drop Components For React Native:

1. react-native-sortable-listview

react-native-sortable-listview

Demo Download

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

React Native Draggable FlatList

Demo Download

A drag-and-drop-enabled FlatList component for React Native.


3. react-native-drag-sort

react-native-drag-sort

Demo Download

Drag and drop sort control for React Native.


4. Drag And Drop Library For React Native

react-native-draggable

Demo Download

A React Native library which helps you create draggable elements on the mobile app.


5. React Native Easy Gestures

React Native Easy Gestures

Demo Download

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:

You Might Be Interested In: