Board: drag a card between columns #35

New issue

Closed

opened 2026-09-05 14:04:19 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-05 14:04:19 +00:00

Owner

Why

Moving a card on the board is a <select> on the card (applications/partials/application_card.html, lines 34–37) that submits its form as soon as it changes, through the data-autosubmit handler in app.js. It works, it needs no JavaScript of consequence, and it feels like filling in a form rather than moving a card. A board is asked to be dragged.

Shape

HTML5 drag and drop, delegated from the document in app.js like everything else there: dragstart on [data-card], dragover and drop on [data-board-column]. No library, no inline handlers (the CSP forbids them), about sixty lines.
No new endpoint. On drop, set the card's own status <select> to the column's status and requestSubmit() the form that is already there. The server path is unchanged — applications:status, through change_status, so the timeline event is written exactly as before.
Optimistic: the card moves at once and the column counts update; if the response is an error, it moves back and says so.
The select stays. Drag and drop does not fire on touch screens, and not everyone uses a mouse; the select remains the keyboard and touch path, and the card carries visually hidden instructions for assistive technology.
Drop targets highlight while dragging; a column that would be an invalid move (none today, since every board status is allowed) would refuse the drop.
Later: an htmx partial swap of the moved card so the "last activity" (the gone quiet issue) updates without a reload.

Classification

Enhancement. Not breaking: progressive, on top of the form that already works.

Open questions

Should dragging into Offer or Accepted ask for confirmation, since those are the moves people make by mistake and then have to explain in the timeline? Proposal: no confirmation; the timeline records the move and the correction both, which is what it is for.

## Why Moving a card on the board is a `<select>` on the card (`applications/partials/application_card.html`, lines 34–37) that submits its form as soon as it changes, through the `data-autosubmit` handler in `app.js`. It works, it needs no JavaScript of consequence, and it feels like filling in a form rather than moving a card. A board is asked to be dragged. ## Shape - **HTML5 drag and drop**, delegated from the document in `app.js` like everything else there: `dragstart` on `[data-card]`, `dragover` and `drop` on `[data-board-column]`. No library, no inline handlers (the CSP forbids them), about sixty lines. - **No new endpoint.** On drop, set the card's own status `<select>` to the column's status and `requestSubmit()` the form that is already there. The server path is unchanged — `applications:status`, through `change_status`, so the timeline event is written exactly as before. - **Optimistic**: the card moves at once and the column counts update; if the response is an error, it moves back and says so. - **The select stays.** Drag and drop does not fire on touch screens, and not everyone uses a mouse; the select remains the keyboard and touch path, and the card carries visually hidden instructions for assistive technology. - Drop targets highlight while dragging; a column that would be an invalid move (none today, since every board status is allowed) would refuse the drop. - **Later**: an htmx partial swap of the moved card so the "last activity" (the *gone quiet* issue) updates without a reload. ## Classification Enhancement. Not breaking: progressive, on top of the form that already works. ## Open questions 1. Should dragging into *Offer* or *Accepted* ask for confirmation, since those are the moves people make by mistake and then have to explain in the timeline? Proposal: no confirmation; the timeline records the move and the correction both, which is what it is for.

tiagoagueda added this to the 0.2.0 milestone

2026-09-05 14:04:19 +00:00

tiagoagueda added the

enhancement

tier

labels

2026-09-05 14:04:19 +00:00

tiagoagueda referenced this issue from a commit

2026-09-06 14:57:39 +00:00

Let a card be dragged across the board

tiagoagueda closed this issue

2026-09-06 14:57:39 +00:00