Drag-and-drop Kanban board

Build a Kanban / multi-container board with @dnd-kit the standard way (DndContext, SortableContext, useSortable on cards) — but three of its defaults misbehave when you drag cards between columns.

A single sortable list (one SortableContext, no cross-column drops) needs none of this — the defaults work.

The three fixes

1. Register each column body as a droppable. SortableContext only registers cards as drop targets, so a drop on empty column space falls back to the nearest card — the wrong column, and the card snaps back. Give each column its own useDroppable({ id: columnId }). (The HTML id attribute alone doesn’t register a target.) 2. Detect collisions from the cursor, not the overlay. The default closestCorners measures from the overlay’s corners and can pick a card in the neighbouring column near a boundary. Use a pointer-first detector:

import { pointerWithin, rectIntersection, type CollisionDetection } from '@dnd-kit/core';

const collisionDetection: CollisionDetection = (args) => {
  const pointer = pointerWithin(args);
  return pointer.length > 0 ? pointer : rectIntersection(args);
};

3. Derive the column’s isOver from context. useDroppable.isOver is false whenever the cursor is over a card (then over.id is the card’s id), so empty-column highlighting breaks. Compute it from useDndContext:

import { useDroppable, useDndContext } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';

function Column({ id, tasks }: { id: string; tasks: Task[] }) {
  const { setNodeRef, isOver: isDirectOver } = useDroppable({ id });
  const { over, active } = useDndContext();
  const overCardHere =
    over != null && over.id !== active?.id && tasks.some(t => t.id === over.id);
  const isOver = isDirectOver || overCardHere;

  return (
    <div ref={setNodeRef} className={isOver ? 'bg-accent' : undefined}>
      <SortableContext items={tasks.map(t => t.id)} strategy={verticalListSortingStrategy}>
        {tasks.map(t => <Card key={t.id} task={t} />)}
      </SortableContext>
    </div>
  );
}

Wiring it together

import { DndContext, PointerSensor, useSensor, useSensors, type DragEndEvent } from '@dnd-kit/core';
import { updateTaskStatus } from 'zitejs/api';

function Board({ columns }: { columns: Record<string, Task[]> }) {
  // Without a distance constraint, every click on a card starts a drag and the
  // card's own click handlers stop firing.
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));

  const onDragEnd = (e: DragEndEvent) => {
    const taskId = String(e.active.id);
    const toColumn = String(e.over?.id ?? '');
    if (!toColumn) return;
    // Move the card in local state first, then persist.
    updateTaskStatus({ taskId, status: toColumn });
  };

  return (
    <DndContext sensors={sensors} collisionDetection={collisionDetection} onDragEnd={onDragEnd}>
      <div className="flex gap-4">
        {Object.entries(columns).map(([id, tasks]) => <Column key={id} id={id} tasks={tasks} />)}
      </div>
    </DndContext>
  );
}

Cards use useSortable({ id: task.id }) normally. Persist the move in a backend workflow calling zite.Tasks.update({ id: taskId, record: { status } }).

Gotchas

PointerSensor needs activationConstraint: { distance: 5 } or clicks on cards register as drags.
Update local state optimistically on drag end, then fire the workflow — don’t block the UI on the round-trip.

Get started

Core concepts

Build with agents

Zite.js framework

Tutorials

Recipes

Deploy

Resources

Drag-and-drop Kanban board

The three fixes

Wiring it together

Gotchas

​The three fixes

​Wiring it together

​Gotchas

The three fixes

Wiring it together

Gotchas