Skip to main content

move-card

Moves a card to a different column, reorders it within the same column, or both.

Usage​

api.exec("move-card", {
  id: CardID,
  column?: ColumnID,
  before?: CardID | null,
});
FieldTypeDescription
idstring | numberID of the card to move. Required.
columnstring | numberTarget column ID. When omitted, the card stays in its current column.
beforestring | number | nullPlace the card before this card in source order. null moves it to the end. Omit to append.

Ignored when column doesn't match any column or before points to a card outside the target column.

Trigger​

// Move card 3 to the "done" column, at the end
api.exec("move-card", { id: 3, column: "done", before: null });

// Reorder card 3 before card 7 within the same column
api.exec("move-card", { id: 3, before: 7 });

Observe​

api.on("move-card", ({ id, column, before }) => {
	console.log(`Card ${id} moved to column ${column}`);
});

Intercept​

// Prevent cards from moving into the "done" column
api.intercept("move-card", ({ column }) => {
	return column !== "done";
});

Component handler​

<Kanban
  :cards="cards"
  :columns="columns"
  :onmovecard="({ id, column }) => {
    console.log(`Card ${id} moved to ${column}`);
  }"
/>
  • Cards guide - card data shape and card actions
  • columns - the column definitions cards move between
  • columnAccessor - controls how column membership is written on move