TaskBoard - Drag Preview

Customize the visible drag preview while preserving TaskBoard drag geometry and selected-card counts.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId">
    <TaskBoard.Content>
        <!-- TaskBoard columns and cards -->
    </TaskBoard.Content>
    <TaskBoard.DragPreview v-slot="{ item, count }">
        <!-- Preview content -->
    </TaskBoard.DragPreview>
</TaskBoard.Root>

TaskBoard.DragPreview replaces only the teleported preview body. TaskBoard still measures the source card wrapper, keeps the preview width stable during horizontal edge scrolling, hides the dragged card group, and calculates drop targets from the runtime geometry snapshot.

Use the preview slot for lightweight summaries, priority stripes, selected-card counts, or compact drag affordances. Keep movement, selection, and persistence in TaskBoard events such as @card-move, @card-reorder, @drag-start, and @drag-end.

#Custom Preview

The custom preview sample uses the UI-folder card part for normal cards and replaces only the drag preview surface.

Loading Demo...