React drag-and-drop components

Oct 28, 2020/listsreactlibraries

Drag and drop UI has become an integral part of most modern applications. It provides richness in UI without comprising the UX. There are many use cases for drag and drop UI. The most common ones are:

  • Using drag and drop in the browser to upload files
  • Moving items between multiple lists
  • Rearranging images or assets

HTML5 drag and drop has an awkward API full of pitfalls and browser inconsistencies. There are a lot of libraries out there that allow for drag and drop interactions within React.

Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature.

react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on).

Editor's Picks



Beautiful and accessible drag and drop for lists with React, powerful keyboard and screen reader support, plays extremely well with standard browser interactions, unopinionated styling, etc.


React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled.


A draggable and resizable grid layout with responsive breakpoints, for React. Compatible with server-rendered apps, Layout can be serialized and restored, no jQuery, etc.


A simple React component for making elements draggable.


Simple React hook to create a HTML5-compliant drag'n'drop zone for files.


Drag-and-drop sortable component for nested data and hierarchies