Drag, Drop, And Selection

Card movement

Cards can be reordered within a workflow column or moved across columns and swimlanes. The complete non-interactive card surface starts a pointer drag and the card itself is the keyboard pickup target. Pointer capture keeps the drag active outside a card, and drop indicators plus localized announcements expose the proposed target.

During a drag, Kanban auto-scrolls the board horizontally and RevoGrid vertically. Filtered cards remain in the canonical bucket; visible cards act as insertion anchors so hidden records keep deterministic ranks.

Touch and mobile behavior

Kanban uses Pointer Events for mouse, pen, and touch rather than browser-native HTML drag-and-drop. A tap selects the card without creating a drag preview. Once touch movement crosses the drag threshold, pointer capture keeps the operation active and horizontal edge auto-scroll exposes off-screen workflow columns. Browser pointercancel events remove the preview and drop feedback without committing a move.

Draggable cards use touch-action: pan-y, so a vertical swipe can continue to scroll a long board from the card surface. A primarily horizontal gesture starts cross-column movement. Because mobile browsers arbitrate vertical gestures before application code, use the context menu, keyboard, or moveCards() API when an exact vertical reorder gesture is claimed by native scrolling.

Keep the grid sized to its container on phones; workflow columns retain their configured widths and scroll inside RevoGrid rather than compressing card content. Validate production integrations on physical iOS Safari and Android Chrome in addition to automated mobile emulation.

Empty alignment cells are not drop zones. A column exposes targets on its existing cards and once in the first empty cell immediately after its final visible card, preventing repeated empty placeholders across the swimlane.

Multiple selection

• Click replaces the selection.
• Cmd/Ctrl-click toggles one card.
• Shift-click selects a contiguous range in board reading order.
• Dragging a selected card moves the entire selection.
• Dragging an unselected card first replaces the selection with that card.

A selection can span several columns and swimlanes. The move is atomic and preserves the selected cards’ prior board reading order.

When filters change, selection is reduced to visible cards. Removed source rows are always pruned.

Keyboard movement

Focus the card, then:

Key	Action
Space	Pick up or drop the selected card group.
Arrow keys	Move the proposed target through positions, columns, and lanes.
Escape	Cancel the active keyboard drag.

The live region announces pickup, target changes, validation failures, cancelation, and completion. Application card content remains inside the managed shell so custom templates cannot remove these interactions.

Card context menu

Right-click a card or focus it and press the Context Menu key/Shift+F10. Kanban uses the same shared context-menu surface as Scheduler and Gantt, including Font Awesome SVG icons, keyboard navigation, nested menus, dividers, viewport-aware positioning, and theme colors.

The built-in menu provides:

• A single Edit request action.
• Move destinations grouped by workflow column and swimlane. If the invoked card belongs to the current multi-selection, the complete selection moves atomically.
• Add card here, scoped to the current column and swimlane.
• A visually separated destructive Delete request.

Move commands use the same rules, transitions, WIP checks, history entry, and persistence events as drag-and-drop. CRUD entries always emit the matching cancelable request event. Register KanbanCardEditorDialogPlugin to handle those requests with the packaged schema-driven editor, or omit/disable it when the host owns dialogs and persistence. The public Open request is still available for an application-owned detail view, but it is not duplicated in the packaged menu or editor. Hide any request action your application does not handle so the menu advertises only working capabilities.

Disable the generated entries or hide individual commands without replacing an application row menu:

grid.kanban = {
  ...config,
  contextMenu: {
    includeHostItems: true,
    hidden: {
      edit: ({ card }) => !permissions.canEdit(card),
      create: ({ column, swimlane }) => !permissions.canCreate(column.prop, swimlane.id),
      delete: ({ cardIds }) => !permissions.canDelete(cardIds),
    },
  },
};

Each hidden entry accepts a boolean or a predicate evaluated when the menu opens. The predicate receives the primary card, invoked cardIds, column, and swimlane. Set contextMenu: false to remove Kanban actions entirely. Visible strings remain configurable through labels, while includeHostItems composes application rowContextMenu entries. Host-owned ContextMenuPlugin instances are preserved across activation and teardown.

Programmatic movement

Locate the plugin through RevoGrid’s plugin collection and call moveCards:

const plugins = await grid.getPlugins();
const kanban = plugins.find((plugin) => plugin instanceof KanbanPlugin);

await kanban?.moveCards(
  ['CARD-12', 'CARD-19'],
  { columnProp: 'review', swimlaneId: 'platform', index: 0 },
  { reason: 'api' },
);

Programmatic moves use the same validation, events, provider update, ranking, and history path as pointer and keyboard moves.