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 (
      

      

         
Final Space Characters
         
            
            {(provided) => (
               

               {characters.map(({ id, name }, index) => {
                  return (
                     {(provided) => (
                        

                        
{name}
                        
                     )}
                     
                  );
               })}
               {provided.placeholder}
               
            )}
            
         
      
   
   );
}

Here we made the whole

Inside droppable

.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;
}