Content
View differences
Updated by Alexander Coles 6 days ago
**As** a user of OpenProject's Backlogs module
**I want to** use drag and drop to move items
**so that** can manage my backlogs, buckets and sprints effectively.
**Acceptance criteria**
_Reorder and move_
* A user with permission to manage backlog/sprint items can reorder a Work package card within a Backlogs list (changing its Position); the new order persists.
* A user can move a Work package card between Backlogs lists — an Inbox backlog, a Backlog bucket, or a Sprint — including into an empty Backlogs list; the move persists.
* During a drag, a Highlighted gap drop indicator marks the candidate Position, shown as the gap above or below a Work package card.
* A scrollable Backlogs list auto-scrolls when a card is dragged near its top or bottom edge.
* Each Backlogs list either accepts dropped Work package cards or does not — drop is enabled per list, not filtered per card. _(To confirm: acceptance is all-or-nothing per Backlogs list.)_
* A user without permission to manage backlog/sprint items cannot drag cards.
_Optimistic behaviour_
* On drop, the Work package card moves to its new Position immediately, before the server confirms.
* If the reorder or move fails, the card returns to its original Position and an error notice is shown.
* If a moved Work package is no longer visible in the current view after the move, the user is notified.
_Gestures_
* Drag works with mouse and trackpad on desktop.
* Touch (mobile / tablet) drag is supported. The touch-initiation gesture and technical approach are tracked in #AGILE-293.
_Accessibility (baseline)_
* A Work package card can be moved without drag, via the move dialog (to Sprint / to Backlog bucket).
* Backlogs lists expose `aria-busy` while a reorder or move is being persisted.
<br>
**Technical notes**
* Migrating Backlogs DnD from dragula to Atlassian Pragmatic DnD (#AGILE-251).
* Reusable `sortable-lists` Stimulus primitive in `frontend/src/stimulus/controllers/dynamic/`; Backlogs is the first consumer.
* Controller topology under discussion in **#AGILE-292** — recommendation: single root + first-class `list`/`item` leaf controllers via outlets. Not yet a final decision.
* Touch (mobile / tablet) drag is not provided by Pragmatic's element adapter (native HTML5 DnD); delivery is tracked in #AGILE-293.
* Direction so far: single root per page = whole interaction surface; type-driven drop acceptance (per-list, multi-valued); elements can be both list and item; root holds a `type → move-URL` map; collection move endpoint per type with `ids[]` in the body (single = `[id]`); multi-select state as a root-owned `Set<itemId>`.
* Related: #AGILE-175 (draggable buckets/sprints), #AGILE-181 (multi-select + batch move), #AGILE-278 (bulk move action), #AGILE-284 (optimistic reordering).
**Permissions and visibility considerations**
* Reordering and moving require permission to manage backlog/sprint items.
_To whom is this feature visible?_
* _When is it not visible?_
**Translation considerations**
* _Key terms and phrases in the key languages_
**Out of scope**
* Multi-select and batch move (#AGILE-181).
* Reordering whole Backlogs lists, buckets, or sprints (#AGILE-175).
* Long-press and advanced gestures beyond basic touch drag.
* Keyboard-operable drag-and-drop and screen-reader drag/drop announcements.
<br>
_Set the_ **To be informed/consulted teams** _field to include all teams necessary to be informed of the changes._
**I want to** use drag and drop to move items
**so that** can manage my backlogs, buckets and sprints effectively.
**Acceptance criteria**
_Reorder and move_
* A user with permission to manage backlog/sprint items can reorder a Work package card within a Backlogs list (changing its Position); the new order persists.
* A user can move a Work package card between Backlogs lists — an Inbox backlog, a Backlog bucket, or a Sprint — including into an empty Backlogs list; the move persists.
* During a drag, a Highlighted gap drop indicator marks the candidate Position, shown as the gap above or below a Work package card.
* A scrollable Backlogs list auto-scrolls when a card is dragged near its top or bottom edge.
* Each Backlogs list either accepts dropped Work package cards or does not — drop is enabled per list, not filtered per card. _(To confirm: acceptance is all-or-nothing per Backlogs list.)_
* A user without permission to manage backlog/sprint items cannot drag cards.
_Optimistic behaviour_
* On drop, the Work package card moves to its new Position immediately, before the server confirms.
* If the reorder or move fails, the card returns to its original Position and an error notice is shown.
* If a moved Work package is no longer visible in the current view after the move, the user is notified.
_Gestures_
* Drag works with mouse and trackpad on desktop.
* Touch (mobile / tablet) drag is supported. The touch-initiation gesture and technical approach are tracked in #AGILE-293.
_Accessibility (baseline)_
* A Work package card can be moved without drag, via the move dialog (to Sprint / to Backlog bucket).
* Backlogs lists expose `aria-busy` while a reorder or move is being persisted.
* Migrating Backlogs DnD from dragula to Atlassian Pragmatic DnD (#AGILE-251).
* Reusable `sortable-lists` Stimulus primitive in `frontend/src/stimulus/controllers/dynamic/`; Backlogs is the first consumer.
* Controller topology under discussion in **#AGILE-292** — recommendation: single root + first-class `list`/`item` leaf controllers via outlets. Not yet a final decision.
* Touch (mobile / tablet) drag is not provided by Pragmatic's element adapter (native HTML5 DnD); delivery is tracked in #AGILE-293.
* Direction so far: single root per page = whole interaction surface; type-driven drop acceptance (per-list, multi-valued); elements can be both list and item; root holds a `type → move-URL` map; collection move endpoint per type with `ids[]` in the body (single = `[id]`); multi-select state as a root-owned `Set<itemId>`.
* Related: #AGILE-175 (draggable buckets/sprints), #AGILE-181 (multi-select + batch move), #AGILE-278 (bulk move action), #AGILE-284 (optimistic reordering).
**Permissions and visibility considerations**
* Reordering and moving require permission to manage backlog/sprint items.
* _When is it not visible?_
* _Key terms and phrases in the key languages_
* Multi-select and batch move (#AGILE-181).
* Reordering whole Backlogs lists, buckets, or sprints (#AGILE-175).
* Long-press and advanced gestures beyond basic touch drag.
* Keyboard-operable drag-and-drop and screen-reader drag/drop announcements.