Card Moving Customization

You can use the onCardMoving real-time event to customize the drag-and-drop moving:

• Show details about the target position.

• Implement custom rules

Examples

Show details about the target position during drag and drop moving:

onCardMoving: args => {
    const targetColumnIndex = kanban.columns.list.findIndex(c => c.id === args.column.data.id);
    const isLastColumn = targetColumnIndex === kanban.columns.list.length - 1;

    const sourceColumnIndex = kanban.columns.list.findIndex(c => c.id === args.card.data.column);

    const label = isLastColumn ? args.left : args.right;
    label.enabled = true;
    label.html = "Moving card to column: " + args.column.data.name + ", position: " + args.position;
}

Implement a custom rule (forbid skipping a column):

onCardMoving: args => {
    const targetColumnIndex = kanban.columns.list.findIndex(c => c.id === args.column.data.id);
    const isLastColumn = targetColumnIndex === kanban.columns.list.length - 1;

    const sourceColumnIndex = kanban.columns.list.findIndex(c => c.id === args.card.data.column);

    // prevent skipping a column
    if (sourceColumnIndex + 1 < targetColumnIndex) {
        args.allowed = false;

        const label = isLastColumn ? args.left : args.right;
        label.enabled = true;
        label.html = "Cannot skip columns.";
    }

}