feat(kanban): drag-and-drop cards between and within columns #46

Merged

AhmedHanafy725 merged 1 commit from development_kanban_card_drag_drop into development

2026-04-22 11:10:41 +00:00

AhmedHanafy725 commented

2026-04-22 10:51:22 +00:00

Member

Summary

Cards in the kanban widget can now be moved between columns (and reordered within a column) by dragging, matching Miro/Trello/Jira-style behavior. The previous 3-dot menu -> "Move to X" flow still works.

Closes #45

Changes

crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js — in renderCard():
- Set draggable: true on the card's Konva.Rect (the card background only — text, menu-hit overlay, and menu dots remain non-draggable; the parent kanban group stays draggable for whole-board movement).
- Added dragstart handler: cancelBubble, WhiteboardHistory.snapshotBefore, and moveToTop() so the grabbed card floats over its neighbors.
- Added dragend handler: converts the stage pointer to group-local coordinates, derives the target column by X (using the same geometry as renderColumn), derives the insertion index by Y via slot midlines, handles same-column downward-move off-by-one, snaps back when no valid target, then re-renders, refreshes the properties panel, commits the history update, and syncs via WhiteboardSync.onUpdate.

Test Results

cargo check --workspace: PASS
cargo clippy --workspace -- -D warnings: PASS (0 warnings)
cargo fmt --all -- --check: PASS
cargo test --workspace --lib: PASS

No regressions to: whole-board drag, double-click inline edit, 3-dot menu actions, column rename/delete/add, card add/delete/duplicate, properties panel, undo/redo, or server sync.

## Summary Cards in the kanban widget can now be moved between columns (and reordered within a column) by dragging, matching Miro/Trello/Jira-style behavior. The previous 3-dot menu -> "Move to X" flow still works. ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_whiteboard/issues/45 ## Changes - `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` — in `renderCard()`: - Set `draggable: true` on the card's Konva.Rect (the card background only — text, menu-hit overlay, and menu dots remain non-draggable; the parent kanban group stays draggable for whole-board movement). - Added `dragstart` handler: `cancelBubble`, `WhiteboardHistory.snapshotBefore`, and `moveToTop()` so the grabbed card floats over its neighbors. - Added `dragend` handler: converts the stage pointer to group-local coordinates, derives the target column by X (using the same geometry as `renderColumn`), derives the insertion index by Y via slot midlines, handles same-column downward-move off-by-one, snaps back when no valid target, then re-renders, refreshes the properties panel, commits the history update, and syncs via `WhiteboardSync.onUpdate`. ## Test Results - `cargo check --workspace`: PASS - `cargo clippy --workspace -- -D warnings`: PASS (0 warnings) - `cargo fmt --all -- --check`: PASS - `cargo test --workspace --lib`: PASS No regressions to: whole-board drag, double-click inline edit, 3-dot menu actions, column rename/delete/add, card add/delete/duplicate, properties panel, undo/redo, or server sync.

AhmedHanafy725 added 1 commit

2026-04-22 10:51:22 +00:00