How to implement react drag and drop

Assuming you have Node.js and npm installed, follow these steps:

Step 1: Set up a new React project and install the required dependencies:

npx create-react-app drag-and-drop-example
cd drag-and-drop-example
npm install react-dnd react-dnd-html5-backend
npm start

Step 2: Replace the contents of src/App.js with the following code:

import React, { useState } from "react";
import { DndProvider, useDrop, useDrag } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

// Sample data
const initialItems = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];

const DND_ITEM_TYPE = "draggedItem";

const DraggableItem = ({ item }) => {
  const [{ isDragging }, drag] = useDrag({
    type: DND_ITEM_TYPE,
    item: { id: item.id, name: item.name },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.5 : 1,
        padding: "8px",
        border: "1px solid #ccc",
        marginBottom: "8px",
        cursor: "move",
      }}
    >
      {item.name}
    </div>
  );
};

const DroppableArea = ({ items, onItemDrop }) => {
  const [{ isOver }, drop] = useDrop({
    accept: DND_ITEM_TYPE,
    drop: (draggedItem) => onItemDrop(draggedItem),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  });

  return (
    <div
      ref={drop}
      style={{
        minHeight: "100px",
        border: "1px dashed #ccc",
        padding: "16px",
        marginTop: "20px",
        backgroundColor: isOver ? "#f0f0f0" : "transparent",
      }}
    >
      {items.map((item) => (
        <DraggableItem key={item.id} item={item} />
      ))}
    </div>
  );
};

const App = () => {
  const [leftItems, setLeftItems] = useState(initialItems);
  const [rightItems, setRightItems] = useState([]);

  const handleItemDrop = (draggedItem) => {
    // Check if the item is already in the right list
    if (rightItems.some((item) => item.id === draggedItem.id)) return;

    // Remove the item from the left list
    const updatedLeftItems = leftItems.filter((item) => item.id !== draggedItem.id);
    setLeftItems(updatedLeftItems);

    // Add the item to the right list
    setRightItems([...rightItems, draggedItem]);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <DroppableArea items={leftItems} onItemDrop={handleItemDrop} />
        <DroppableArea items={rightItems} onItemDrop={handleItemDrop} />
      </div>
    </DndProvider>
  );
};

export default App;

In this code, we use react-dnd and react-dnd-html5-backend to implement drag and drop functionality. We have two main components: DraggableItem and DroppableArea. DraggableItem represents an item that can be dragged, and DroppableArea is an area where items can be dropped. When an item is dropped into a DroppableArea, it moves from one list to another.

Remember to include the necessary CSS and dependencies in your index.html file. You can find these in the official documentation for react-dnd.

Now, run the React app with npm start and test the drag and drop functionality with the two lists of items. You should be able to drag items from one list to another.

Refrence
Reference1
refrence2
reference3
refrence4
refrence5

Debug School

How to implement react drag and drop

Top comments (0)