Explore the 20+ best React drag and drop components to help you create interactive and user-friendly interfaces for your apps. These examples cover a wide range of use cases, including file upload, sorting, and reordering.
What is it good for?
Juggle all your tasks! (A fullstack Kanban app w/ drag-and-drop) drag-and-drop task management with react-beautiful-dnd.
Features
Yet another Kanban/Trello board lib for React.
Proof of concept for doing a nested drag and drop in React. Features smooth, animated drop and cancel.
At the moment this serves more as a proof of concept (or example) rather than a library-like thing.
Features
React drag and drop framework with inbuilt virtualizing scrollbars.
This library was made by Forecast - powered by AI, Forecast is supporting your work process with a complete Resource & Project Management platform. Connect your work, fill your pipeline, & meet your deadlines at www.forecast.app
react-virtualized-dnd is a React-based, fully virtualized drag-and-drop framework, enabling the the cross over of great user interaction and great performance. This project was made in response to the large amount of issues experienced trying to use virtualization libraries together with drag and drop libraries - react-virtualized-dnd does it all for you!
A React component built on top of the mature drag and drop library, Sortable
React component wrapping SortableJS!
We’re now on version 2.0! A major API overhaul with typescript types.
Component for building file fields - from basic file inputs to drag and drop image galleries.
A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field with drag and drop support and preview of selected images.
Drag-and-drop cards implemented using React and dragula.
Demo:
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.
Features
Demo: http://sortablejs.github.io/Sortable/
Addon for the ‘react-beautiful-dnd’ that adds natural dragging animation
Demo https://rokborf.github.io/natural-drag-animation-rbdnd/
Drag-and-drop sortable component for nested data and hierarchies
A React component for Drag-and-drop sortable representation of hierarchical data. Checkout the demo for a demonstration of some basic features. Checkout the storybook for advanced usage
Demo https://frontend-collective.github.io/react-sortable-tree/
This is a simple but customizeable component. You can choose between a pre-styled version, or a bare component that allows you to specify a render function.
Both versions will trigger an .onDrop(file: HTML5 File, text: String), so you get both the file handle and its text content in a single event (file reading can be disabled).
Demo https://stackblitz.com/edit/react-styled-drop-zone-demo
ReactJS drag and drop functionality for mouse and touch devices.
Features
Live demo https://peterh32.github.io/react-drag-drop-container/
Pluggable components to add a trello-like kanban board to your application.
Features
This is a React component that wraps braintree-web-drop-in (v3).
A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.
Features
Higher Order Components – Integrates with your existing components
Drag handle, auto-scrolling, locked axis, events, and more!
Suuuper smooth animations – Chasing the 60FPS dream rainbow
Works with virtualization libraries: react-virtualized, react-tiny-virtual-list, react-infinite, etc.
Horizontal lists, vertical lists, or a grid ↔ ↕ ⤡
Touch support ok_hand
Examples available here: http://clauderic.github.io/react-sortable-hoc/
A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it’s hardware accelerated whenever possible.
This library consists wrapper React components over smooth-dnd library.
Demo https://kutlugsahin.github.io/smooth-dnd-demo/
View on Github
React implementation of a sortable drag and drop list organised into columns.
Dragact is a React component that enables you to build a powerful drag-and-drop grid layout easily and quickly.
Drag and Drop library for React,HTML5 file Drag and Drop component.
Drag and drop so simple it hurts,Official React wrapper for dragula.
Live Demo
http://bevacqua.github.io/react-dragula/
Sortable and resizable pane component for React
#reactjs #javascript #programming