TaskDnd

TaskDnd is the drag-and-drop wiring behind the TaskBoard: a provider, the cards people drag, the places they drop them, the gap a card lands in and the copy of the card that follows the pointer. It decides nothing about tasks. The caller says which drops are allowed and what a move does, such as changing #25 from Todo to In Review.

When to use

Anatomy

• TaskDndProvider: wraps the board and its overlay. It holds isDropAllowed, the caller's policy, calls onMove when a card is dropped on an allowed target, and passes accessibility to dnd-kit. Required.
• TaskDropZone: a place a card can be dropped, usually a TaskBoardColumn through render. It reports dropState: idle, allowed or blocked.
• TaskDraggable: wraps one TaskCard and makes it draggable. With dropId it is also a drop target, so a card can land before or after it.
• TaskDropPlaceholder: the gap where the card would land, before or after a card, or in an empty column. It shows only while the drop there is allowed.
• TaskDragOverlay: the copy of the card that follows the pointer. Render the dragged card inside it, and nothing when no card is dragged.

States

Behavior

• With a mouse, a drag starts once the pointer has moved 5px, so a click on the card isn't a drag.
• On a touch screen, hold the card still for 500ms, then move it: the drag starts on that move. Moving before the hold is up scrolls the board instead (Dragging on a touch screen).
• Where the card lands follows the middle of the dragged card: above the middle of the card under it is before, below is after.
• The card doesn't animate back or into place on drop. The move is the caller's: onMove may return a promise, and onMoveError receives its rejection, so the caller can undo the change and say what went wrong.

Accessibility

• The parts wrap dnd-kit, not Base UI. TaskDraggable carries dnd-kit's attributes: it is focusable, with a role description and instructions for screen readers.
• Keyboard: Tab to a card, then Space picks it up. ArrowDown and ArrowUp move it one slot down or up its column, before or after each card; ArrowLeft and ArrowRight move it to the nearest drop target in the next column, such as an empty column or the card level with it. Space drops it and Escape cancels. The keys step between drop targets, so a card moves the same way whether or not it leaves its column while it is dragged.
• After a keyboard drop, focus stays where dnd-kit leaves it. Moving focus to the moved card, which has a new place in the DOM, is the caller's job: focus it in onMove or onDragEnd once the board has rendered the move.
• dnd-kit's own announcements name cards and targets by their ID. Pass accessibility to TaskDndProvider to replace them: it goes to dnd-kit's DndContext as is, with announcements (what to say on pick-up, move, drop and cancel) and screenReaderInstructions (how to drag, read with each card). Write them in words, such as "Task #25 moved to In Review", or announce each move in a polite live region of your own; the TaskBoard composition shows how.
• TaskDropPlaceholder is hidden from assistive technology.

Rules

• Decide in isDropAllowed which drops are allowed, so the target says while the card is over it that it can't move there (TaskBoard).
• Offer another way to change a status: dragging is one of three (Tasks).
• Put the dragged card's own TaskCard in TaskDragOverlay, so the card under the pointer reads the same as the one in the column.