Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
815 Views
