Drag and Drop (React DnD)

React DnD (React Drag and Drop) is a powerful library for building complex drag and drop interfaces in React applications. It abstracts away the intricacies of the HTML5 drag and drop API, providing a more declarative and React-centric way to manage drag interactions.

Core Concepts:

1. DndProvider: This is the top-level component that wraps your entire application or the portion of your application where drag and drop functionality is needed. It provides the necessary context for all drag sources and drop targets within its tree. You must specify a 'backend' for the `DndProvider`, which determines how drag and drop events are handled (e.g., `HTML5Backend` for desktop browsers, `TouchBackend` for touch devices).

2. Item Types: React DnD uses 'item types' to categorize draggable items. This allows you to specify which types of items a drop target can accept. For example, you might have 'CARD' types, 'BOX' types, or 'FILE' types. This helps in managing complex interactions where different types of items might behave differently when dragged or dropped.

3. `useDrag` Hook: This hook is used to make a component draggable. It returns an array containing:
* `collect`: A function that can be used to collect properties from the drag monitor. These properties can then be used to render the draggable component's visual state (e.g., `isDragging`).
* `drag`: A ref that you attach to the draggable DOM element. React DnD uses this ref to connect the element to its drag source logic.

The `useDrag` hook takes a 'spec' object as an argument, which typically includes:
* `type`: The item type of the draggable item.
* `item`: An object representing the data associated with the draggable item. This data will be available to drop targets.
* `collect`: A function that receives the `monitor` object and returns an object of collected properties.
* `end`: An optional function that fires when a drag operation ends, regardless of whether it was dropped on a valid target.

4. `useDrop` Hook: This hook is used to make a component a drop target. It also returns an array containing:
* `collect`: A function that can be used to collect properties from the drop monitor, such as `isOver` (true if an item is hovering over the target) or `canDrop` (true if the target can accept the currently dragged item).
* `drop`: A ref that you attach to the droppable DOM element.

The `useDrop` hook also takes a 'spec' object, typically including:
* `accept`: An item type (or an array of item types) that this drop target can accept.
* `collect`: A function that receives the `monitor` object and returns an object of collected properties.
* `drop`: A function that fires when a draggable item is dropped on this target. It receives the `item` data from the `useDrag` hook and the `monitor` object.
* `hover`: An optional function that fires when a draggable item is hovering over the target.
* `canDrop`: An optional function that can be used to conditionally allow or disallow dropping based on the current drag state.

React DnD promotes a clear separation of concerns, allowing you to define the drag sources and drop targets independently and manage their interactions through item types and monitor functions. This makes it highly flexible for creating various drag-and-drop user experiences, from simple reordering lists to complex kanban boards and file uploads.

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

// Define item types
const ItemTypes = {
  BOX: 'box',
};

// --- Draggable Box Component ---
const DraggableBox = ({ name }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemTypes.BOX,
    item: { name },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  const opacity = isDragging ? 0.4 : 1;

  return (
    <div
      ref={drag}
      style={{
        border: '1px dashed gray',
        backgroundColor: 'white',
        padding: '0.5rem 1rem',
        margin: '0.5rem',
        cursor: 'move',
        opacity,
        width: '100px',
        textAlign: 'center',
      }}
    >
      {name}
    </div>
  );
};

// --- Droppable Dustbin Component ---
const DroppableDustbin = () => {
  const [droppedItems, setDroppedItems] = useState([]);

  const [{ isOver, canDrop }, drop] = useDrop(() => ({
    accept: ItemTypes.BOX,
    drop: (item, monitor) => {
      setDroppedItems((prev) => [...prev, item.name]);
      return undefined; // Must return undefined or an object
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }));

  const backgroundColor = isOver && canDrop ? 'lightgreen' : canDrop ? 'lightblue' : 'lightgray';

  return (
    <div
      ref={drop}
      style={{
        minHeight: '120px',
        minWidth: '200px',
        border: '1px solid black',
        backgroundColor,
        padding: '1rem',
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      {isOver && canDrop && <p>Release to drop!</p>}
      {!isOver && canDrop && <p>Drag a box here</p>}
      {!canDrop && <p>Not droppable</p>}
      {droppedItems.length > 0 && (
        <div>
          <h3>Dropped Items:</h3>
          <ul>
            {droppedItems.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

// --- App Component ---
const App = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <div style={{ display: 'flex', justifyContent: 'space-around', padding: '20px' }}>
        <div>
          <h2>Draggable Boxes</h2>
          <DraggableBox name="Box 1" />
          <DraggableBox name="Box 2" />
          <DraggableBox name="Box 3" />
        </div>
        <div>
          <h2>Droppable Dustbin</h2>
          <DroppableDustbin />
        </div>
      </div>
    </DndProvider>
  );
};

export default App;