TaskDnd

dnd-kit wiring for task drag sources and drop targets. Drop policy and move effects stay consumer-owned.

Preview#

Anatomy#

import {
  TaskBoardColumn,
  TaskBoardRoot,
  TaskCard,
  TaskDndProvider,
  TaskDragOverlay,
  TaskDraggable,
  TaskDropPlaceholder,
  TaskDropZone,
} from "raft-ui";

<TaskDndProvider isDropAllowed={() => true} onMove={() => {}}>
  <TaskBoardRoot>
    <TaskBoardColumn render={<TaskDropZone id="task-status:todo" data={{ status: "todo" }} />}>
      <TaskDropPlaceholder id="task-1" placement="before" />
      <TaskDraggable
        id="task-1"
        dropId="task-1"
        dropData={{ status: "todo", taskId: "task-1" }}
      >
        <TaskCard />
      </TaskDraggable>
      <TaskDropPlaceholder id="task-1" placement="after" />
    </TaskBoardColumn>
  </TaskBoardRoot>
  <TaskDragOverlay>
    <TaskCard />
  </TaskDragOverlay>
</TaskDndProvider>

Usage#

Allowed and blocked drops#

The demo composition passes blockedDropStatus="closed", which the board turns into an isDropAllowed policy. Drag a card onto Closed to see blocked empty-state copy; other columns accept the drop and call onMove.

API#WIP

TaskDndProvider#

disableddefault: false
boolean
Disables pointer, touch, and keyboard drag sensors.
isDropAllowed
(activeId, overId, overData) => boolean
Consumer policy for whether a drop target is allowed.
onMove
(details: TaskMoveDetails) => void | Promise<void>
Called when a drag ends over an allowed target.
onMoveError
(error, details) => void
Called when onMove rejects.
onDragStart
(event: DragStartEvent) => void
Optional hook fired when a drag starts.
onDragOver
(event: DragOverEvent) => void
Optional hook fired when a draggable moves over another droppable.
onDragCancel
(event: DragCancelEvent) => void
Optional hook fired when a drag is cancelled.
onDragEnd
(event: DragEndEvent) => void
Optional hook fired when a drag ends.
children
ReactNode
Board or list content that participates in drag and drop.

TaskDraggable#

id
UniqueIdentifier
Stable drag source id.
disableddefault: false
boolean
Disables dragging for this item.
dropId
UniqueIdentifier
Optional card-level drop target id for before/after insertion.
dropData
TaskDropData
Consumer metadata returned from onMove for the card-level target.
...props
ComponentPropsWithRef<"div">
Draggable host. Usually wraps a TaskCard.

TaskDropZone#

id
UniqueIdentifier
Stable drop target id.
disableddefault: false
boolean
Disables this drop target.
data
TaskDropData
Consumer metadata returned from onMove for this target.
...props
useRender.ComponentProps<"div", { dropState: TaskDropState }>
Droppable host. Exposes dropState idle | allowed | blocked via render state.

TaskDropPlaceholder#

id
UniqueIdentifier
The matching drop target id. Renders an allowed landing placeholder at the active card height.
placement
"before" | "after"
Optional insertion edge for a card-level target.
...props
useRender.ComponentProps<"div", { dropState: TaskDropState }>
A presentational landing slot; it is hidden unless the matching target allows the active task.

TaskDragOverlay#

children
ReactNode
Consumer-rendered drag preview. Render null when no item is active.