TaskDnd

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

GitHub

Preview#

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

No in review tasks.

No done tasks.

No closed tasks.

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>

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.

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

No in review tasks.

No done tasks.

No closed tasks.

API#WIP

TaskDndProvider#

Prop	Type	Default	Description
`disabled`	boolean	false	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#

Prop	Type	Default	Description
`id`	UniqueIdentifier	—	Stable drag source id.
`disabled`	boolean	false	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#

Prop	Type	Default	Description
`id`	UniqueIdentifier	—	Stable drop target id.
`disabled`	boolean	false	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#

Prop	Type	Default	Description
`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#

Prop	Type	Default	Description
`children`	ReactNode	—	Consumer-rendered drag preview. Render null when no item is active.