How to Add Drag and Drop in React using React Beautiful DnD

In this article, we will see how to drag and drop elements in a list. Drag and drop can be a useful feature when you are making a chat, dating, messenger, or any other similar type of web apps.

Example

First install the package "react-beautiful-dnd" −

npm i --save react-beautiful-dnd

This library will be used to add drag-and-droppable elements inside a list.

Add the following lines of code in App.js −

import { DragDropContext, Droppable, Draggable } from "reactbeautiful-dnd";
import React, { useState } from "react";
import "./App.css";

const finalSpaceCharacters = [
   {
      id: "gary",
      name: "Gary Goodspeed",
   },
   {
      id: "cato",
      name: "Little Cato",
   },
   {
      id: "kvn",
      name: "KVN",
   },
   {
      id: "mooncake",
      name: "Mooncake",
   },
   {
      id: "quinn",
      name: "Quinn Ergon",
   },
];

export default function App() {
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
   function handleOnDragEnd(result) {
      if (!result.destination) return;

      const items = Array.from(characters);
      const [reorderedItem] = items.splice(result.source.index, 1);
      items.splice(result.destination.index, 0, reorderedItem);

      updateCharacters(items);
   }
   return (
      <div className="App">
      <header className="App-header">
         <h1>Final Space Characters</h1>
         <DragDropContext onDragEnd={handleOnDragEnd}>
            <Droppable droppableId="characters">
            {(provided) => (
               <ul className="characters"{...provided.droppableProps}ref={provided.innerRef}>
               {characters.map(({ id, name }, index) => {
                  return (
                     <Draggable key={id} draggableId={id}index={index}>{(provided) => (<liref{provided.innerRef}{...provided.draggableProps}{...provided.dragHandleProps}>
                        <div className="charactersthumb"></div>
                        <p>{name}</p>
                        </li>
                     )}
                     </Draggable>
                  );
               })}
               {provided.placeholder}
               </ul>
            )}
            </Droppable>
         </DragDropContext>
      </header>
   </div>
   );
}

Here we made the whole <ul> list droppable ("provided" is necessary in case of both droppable and draggable).

Inside droppable <ul> we mapped the whole character list and made each draggable component. Inside each component, we added <li> which contains all data. We used reference of each draggable component on <li>.

Next, add the following lines in App.css to create the basic CSS of the website −

.characters {
   list-style: none;
   padding-left: 0;
}

.characters li {
   display: flex;
   align-items: center;
   border: solid 2px #d0d0d0;
   border-radius: .2em;
   padding: .5em .8em .5em .5em;
   margin-bottom: 1em;
}

.characters p {
   max-width: none;
   font-weight: bold;
   margin: 0;
}

.characters-thumb {
   overflow: hidden;
   flex-shrink: 0;
   width: 2em;
   height: 2em;
   background-color: #e8e8e8;
   padding: .5em;
   margin-right: .5em;
}
.characters-thumb img {
   display: block;
   width: 100%;
   height: auto;
}

Output

On execution, it will produce the following output −