DayPilot.Kanban.onCardMoving

The onCardMoving event handler fires in real time whenever the Kanban card shadow is moved to another position during drag & drop event moving.

You can use onCardMoving to customize move validation and visual feedback while dragging, for example by forbidding selected target locations or updating the inline indicators shown next to the shadow. Available since 2025.2.6514.

Declaration

DayPilot.Kanban.onCardMoving(args)

Parameters

• args.allowed (boolean) - determines whether the card can be dropped at the current target location

• args.ctrl (boolean) - true if the Ctrl key is pressed (read-only)

• args.shift (boolean) - true if the Shift key is pressed (read-only)

• args.meta (boolean) - true if the Meta key is pressed (read-only)

• args.alt (boolean) - true if the Alt key is pressed (read-only)

• args.cssClass (string) - CSS class added to the moving shadow

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

• args.column (object) - target column; the target data object is available as args.column.data

• args.external (boolean) - true if the card comes from an external source

• args.html (string) - HTML of the shadow object (available since 8.3.2589)

• args.position (number) - position index inside the target cell

• args.left.html (string) - HTML of the indicator displayed on the left

• args.left.enabled (boolean) - when set to true, the left inline indicator is displayed

• args.right.html (string) - HTML of the indicator displayed on the right

• args.right.enabled (boolean) - when set to true, the right inline indicator is displayed

• args.swimlane (object) - target swimlane; the target data object is available as args.swimlane.data

Notes

Use this event to apply custom move rules and to update the drag shadow while the user is still moving the card. Setting args.allowed to false blocks the current drop target, and args.cssClass, args.html, args.left, and args.right let you customize the feedback displayed during the move.

Examples

JavaScript

const kanban = new DayPilot.Kanban("dp", {
  onCardMoving: (args) => {
    args.right.enabled = true;
    args.right.html = "Move to column: " + args.column.data.name + ", " + args.position;
    args.left.enabled = true;
    args.left.html = "Move to column: " + args.column.data.name + ", " + args.position;
  },
  // ...
});
kanban.init();

Angular

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

config: DayPilot.KanbanConfig = {
  onCardMoving: (args) => {
    args.right.enabled = true;
    args.right.html = "Move to column: " + args.column.data.name + ", " + args.position;
    args.left.enabled = true;
    args.left.html = "Move to column: " + args.column.data.name + ", " + args.position;
  },
  // ...
};

React

<DayPilotKanban
  onCardMoving={onCardMoving}
  {/* ... */}
/>

const onCardMoving = (args) => {
  args.right.enabled = true;
  args.right.html = "Move to column: " + args.column.data.name + ", " + args.position;
  args.left.enabled = true;
  args.left.html = "Move to column: " + args.column.data.name + ", " + args.position;
};

Vue

<DayPilotKanban
  @cardMoving="onCardMoving"
  <!-- ... -->
/>

const onCardMoving = (args) => {
  args.right.enabled = true;
  args.right.html = "Move to column: " + args.column.data.name + ", " + args.position;
  args.left.enabled = true;
  args.left.html = "Move to column: " + args.column.data.name + ", " + args.position;
};

See Also

DayPilot.Kanban.cardMoveHandling

DayPilot.Kanban.onCardMove

DayPilot.Kanban.onCardMoved

DayPilot.Kanban Class