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

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 −

Updated on: 2021-09-28T11:47:11+05:30

951 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements