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.";
}
}