TaskBoard - Drag and Drop

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';

<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" draggable @drag-start="onDragStart" @drag-end="onDragEnd" @drag-cancel="onDragCancel" @card-move="onCardMove" @card-reorder="onCardReorder">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Drag and drop is enabled by default. Keep draggable true and listen to move or reorder events when the app needs persistence, audit logs, or server validation. With v-model:tasks, TaskBoard updates the model first and the handler can log or persist the accepted change. In swimlane boards, provide swimlane-field so placement, row targets, and move payloads stay lane-aware.

#Drag Options

const workflowFeatures = {
    dragDrop: true,
    columnCollapse: true,
    columnReorder: false,
    swimlanes: true,
    wipLimits: true,
    contextMenu: true,
    cardSelection: true
};

Set draggable="false" for a board-level lock. Use features.dragDrop = false when drag surfaces should be disabled through the shared feature map.

#Drag Start Rules

TaskBoard waits for pointer movement before a drag starts. The default threshold is 5 pixels and can be tuned with drag-min-distance. A card can also opt out with draggable: false, and column access can block moves out of or into specific columns.

When the pointer is released before the threshold, TaskBoard treats the gesture as a card click. In selection modes, that click updates selection instead of starting a drag.

#Target Stability

TaskBoard snapshots column, swimlane cell, and card geometry during a drag. The snapshot is refreshed after horizontal board scrolling or vertical column scrolling, so the drop indicator and the accepted move use the same scrolled target. Edge auto-scroll stops at the left, right, top, and bottom bounds instead of overshooting.

#Move Payload

Workflow rules and access checks run before the move is applied. A rejected drop emits @card-drop-blocked; a move that requires confirmation is held until TaskBoard.DragConfirm calls the confirm action.

#Multi-Card Moves

When selection-mode="multiple" is active and the dragged card is part of the current selection, TaskBoard moves the selected ids together in their rendered source order. The drag preview badge uses that selected-id list, and the final @card-move payload still names the card that started the drag.

Dragging a card that is not part of the current selection moves only that card. Existing selected ids remain selected, but they are not included in the move.

#Preview Surface

Use TaskBoard.DragPreview or the drag-preview root slot when the visible preview should differ from the card markup. Multi-card drags use getDragHiddenIds() to show the selected count.

#Basic Drag

The basic drag sample moves cards between workflow columns and logs drag lifecycle events.

#Multi-Card Drag

The multi-selection sample moves selected cards together and shows the drag preview count.

#Swimlane Drag

The swimlane sample emits old and new swimlane ids when a card moves across rows.

#Custom Drag Preview

The custom preview sample replaces the drag preview content while TaskBoard keeps target calculation.

#Related Docs

• Selection
• Transition Rules
• Events
• Data Attributes