Home/ Questions/Q 503
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T00:57:13+00:00 In:

How do you implement drag and drop in React?

  • 0
  • 0

An explanation of drag-and-drop in React.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Finn Phillips
    Beginner

    ⚡ Implementing Drag and Drop in React

    You can implement drag and drop in React using either:

    1. Native HTML5 Drag & Drop API (for simple cases)
    2. Libraries like react-beautiful-dnd or react-dnd (for complex interactions)

    Let me walk you through both approaches. 🚀

    ✅ 1️⃣ Native HTML5 Drag & Drop API (Simple Example)

    Here’s how to create a simple draggable list where you can reorder items.

    🛠️ Example: Draggable List

    import { useState } from 'react';

const DraggableList = () => {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
const [draggedItemIndex, setDraggedItemIndex] = useState(null);

const handleDragStart = (index) => setDraggedItemIndex(index);

const handleDragOver = (e) => e.preventDefault();

const handleDrop = (index) => {
const updatedItems = [...items];
const [draggedItem] = updatedItems.splice(draggedItemIndex, 1);
updatedItems.splice(index, 0, draggedItem);
setItems(updatedItems);
setDraggedItemIndex(null);
};

return (
<ul>
{items.map((item, index) => (
<li
key={item}
draggable
onDragStart={() => handleDragStart(index)}
onDragOver={handleDragOver}
onDrop={() => handleDrop(index)}
style={{
padding: '10px',
margin: '5px',
backgroundColor: '#f0f0f0',
border: '1px solid #ccc',
cursor: 'grab',
}}
>
{item}
</li>
))}
</ul>
);
};

export default DraggableList;

    ⚡ Key Concepts:

    • draggable: Makes the item draggable.
    • onDragStart: Captures the index of the dragged item.
    • onDragOver: Prevents the default to allow dropping.
    • onDrop: Reorders items when dropped.

    ✅ 2️⃣ Using react-beautiful-dnd (Advanced Drag & Drop)

    For more complex UIs (like Trello-style boards), use react-beautiful-dnd.

    📦 Install the Library:

    npm install react-beautiful-dnd

    🛠️ Example: Reorderable List with react-beautiful-dnd

    import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { useState } from 'react';

const DnDList = () => {
const [items, setItems] = useState([
{ id: '1', content: 'Item 1' },
{ id: '2', content: 'Item 2' },
{ id: '3', content: 'Item 3' },
]);

const handleOnDragEnd = (result) => {
if (!result.destination) return;

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

setItems(updatedItems);
};

return (
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="droppable-list">
{(provided) => (
<ul {...provided.droppableProps} ref={provided.innerRef}>
{items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
userSelect: 'none',
padding: '10px',
margin: '5px',
backgroundColor: snapshot.isDragging ? '#d3d3d3' : '#f0f0f0',
border: '1px solid #ccc',
...provided.draggableProps.style,
}}
>
{item.content}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
};

export default DnDList;

    ⚡ Key Concepts in react-beautiful-dnd:

    • DragDropContext: The root wrapper.
    • Droppable: Defines a drop zone (like a list or board).
    • Draggable: Makes an item draggable.
    • onDragEnd: Handles what happens after a drag ends (e.g., reorder items).

    🔥 Which Approach Should You Use?

    • 🟢 Native API → Great for simple drag and drop (like moving a single item).
    • 🔥 react-beautiful-dnd → Best for complex UIs (e.g., Kanban boards, multi-lists).