TaskBoard - Drop Indicators

#Usage

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

<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId">
    <TaskBoard.Content>
        <TaskBoard.ColumnContent>
            <TaskBoard.Card />
        </TaskBoard.ColumnContent>
    </TaskBoard.Content>
    <TaskBoard.DropIndicator v-slot="{ column, index }">
        <DropMarker :column="column" :index="index" />
    </TaskBoard.DropIndicator>
</TaskBoard.Root>

Use TaskBoard.DropIndicator or the built-in marker class when drag placement needs product styling. TaskBoard still decides where the indicator appears and whether the drop is allowed.

#Choose an Indicator

Keep the marker lightweight. It appears and moves during pointer interaction, so the visual should not trigger layout jumps or large repaints.

#Small Override

TaskBoard.DropIndicator receives the target column and insertion index. It does not receive the dragged item; use move events after drop for persistence and validation.

<TaskBoard.DropIndicator v-slot="{ column, index }">
    <div class="kanban-drop-line" :data-column-id="column.id">
        <span>Drop at position {{ index + 1 }}</span>
    </div>
</TaskBoard.DropIndicator>

For a marker-only treatment, style the built-in class instead of replacing the slot.

.operations-board .p-taskboard-drop-indicator {
    height: 0.25rem;
    border-radius: 999px;
    background: var(--p-primary-color);
}

.operations-board [data-column-id='review'] .p-taskboard-drop-indicator {
    background: var(--p-yellow-500);
}

#Indicator Hooks

Runtime classes include p-taskboard-drop-indicator and p-taskboard-card-dragging. Use them for styling and test selectors. Pair the indicator class with data-column-id or data-swimlane-id when one lane needs a different marker.

#Drag Boundary

Do not reimplement pointer hit testing in the marker. TaskBoard tracks the drag source, target column, insertion index, hidden selected cards, and validity. Use emitted movement payloads to persist the accepted change.

If a workflow needs to reject a move, keep that rule in TaskBoard props or move handlers. The visual marker can make a target look blocked, but it should not be the source of truth for whether a card can move.

#State Hooks

Use public classes and attributes for styling:

#Drop Indicator Studio

The drop indicator preview switches between an insertion line, a ghost card, and a lane callout while keeping the same TaskBoard drag calculations. The examples keep the indicator height stable so card lists do not jump during pointer movement.

#Checklist

• Keep the indicator height stable so hover or drag movement does not shift cards.
• Do not put buttons or focusable controls inside the drop marker.
• Style invalid, dragging, and active target states in both light and dark mode.
• Keep large column-wide highlights out of dense boards; they can hide the exact insertion point.
• Use the column and index slot props for display only; persist moves from TaskBoard events.
• Keep marker copy short. Most boards only need color, shape, or a small insertion line.
• Verify multi-select drag if the board supports moving several cards at once.

#API

Use TaskBoard.DropIndicator when the marker needs custom structure. It receives column and index. Related hooks include p-taskboard-drop-indicator, p-taskboard-card-dragging, data-column-id, and data-swimlane-id. See Data Attributes for stable selectors.

#Related Docs

• Compound Components
• UI Parts
• Column Slots
• Data Attributes
• Slots and Contexts
• Theming