DayPilot.Kanban.onCardMove

The onCardMove event handler fires when Kanban card dragging finishes and the card is dropped at the target position, but before the card is actually moved. You can cancel the move or switch to asynchronous processing here.

Declaration

DayPilot.Kanban.onCardMove(args)

Parameters

• args.async (boolean) - set to true to enable asynchronous processing (available since 2024.2.5912)

• args.card (DayPilot.Card object) - card being moved

• args.column (DayPilot.Column object) - target column

• args.control (DayPilot.Kanban) - control instance

• args.position (integer) - target position inside the destination cell

• args.previous (DayPilot.Card object) - card preceding the target position

• args.next (DayPilot.Card object) - card following the target position

• args.swimlane (DayPilot.Swimlane object) - target swimlane

• args.preventDefault() - cancels the default action

• args.loaded() - continues processing in asynchronous mode (available since 2024.2.5912)

Notes

The built-in drop action is controlled by DayPilot.Kanban.cardMoveHandling. When it is set to "Update", the card location is updated on the client side after this handler completes.

The source data object is accessible as args.card.data. Set args.async = true before returning if you need asynchronous validation, and call args.loaded() when the custom processing finishes.

Examples

JavaScript

const dp = new DayPilot.Kanban("dp", {
  cardMoveHandling: "Update",
  onCardMove: (args) => {
    if (!confirm("Do you really want to move this card?")) {
      args.preventDefault();
    }
  },
  // ...
});
dp.init();

Angular

<daypilot-kanban [config]="config"></daypilot-kanban>

config: DayPilot.KanbanConfig = {
  cardMoveHandling: "Update",
  onCardMove: (args) => {
    if (!confirm("Do you really want to move this card?")) {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotKanban
  cardMoveHandling="Update"
  onCardMove={onCardMove}
  {/* ... */}
/>

const onCardMove = (args) => {
  if (!confirm("Do you really want to move this card?")) {
    args.preventDefault();
  }
};

Vue

<DayPilotKanban
  cardMoveHandling="Update"
  @cardMove="onCardMove"
  <!-- ... -->
/>

const onCardMove = (args) => {
  if (!confirm("Do you really want to move this card?")) {
    args.preventDefault();
  }
};

See Also

DayPilot.Kanban.onCardMoving

DayPilot.Kanban.onCardMoved

DayPilot.Kanban.cardMoveHandling

DayPilot.Kanban Class