Advanced Drag and Drop

Multi-container sorting, drag previews, drop indicators, and touch support.

Overview

Advanced DnD patterns enable complex interfaces like kanban boards and file managers.

Key Concepts

• Multi-Container — Drag items between containers
• Drag Previews — Custom preview during drag
• Drop Indicators — Visual feedback for drop targets
• Touch Support — Mobile-friendly drag and drop
• Animate on Drop — Smooth animations when items settle

Code Examples

import { DndContext, DragOverlay, closestCorners } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';

function KanbanBoard({ columns, onMoveCard }) {
  const [activeCard, setActiveCard] = useState(null);

  const handleDragStart = (event) => {
    setActiveCard(event.active.data.current.card);
  };

  const handleDragEnd = (event) => {
    const { active, over } = event;
    setActiveCard(null);
    
    if (over) {
      const sourceColumn = active.data.current.columnId;
      const destColumn = over.data.current?.columnId || over.id;
      onMoveCard(active.id, sourceColumn, destColumn);
    }
  };

  return (
    <DndContext
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <div className="board">
        {columns.map(column => (
          <Column key={column.id} column={column} />
        ))}
      </div>
      <DragOverlay>
        {activeCard && <Card card={activeCard} />}
      </DragOverlay>
    </DndContext>
  );
}

function Column({ column }) {
  return (
    <div className="column" data-column-id={column.id}>
      <h3>{column.title}</h3>
      <SortableContext items={column.cards.map(c => c.id)} strategy={verticalListSortingStrategy}>
        <div className="card-list">
          {column.cards.map(card => (
            <SortableCard key={card.id} card={card} columnId={column.id} />
          ))}
        </div>
      </SortableContext>
    </div>
  );
}

Practice

Build a multi-container sortable list with custom drag previews.