This work package tracks how we transition from Dragula to Begin of the insertionPragmatic Drag and DropEnd of the insertion Begin of the deletion a new DnD solutionEnd of the deletion across the Begin of the insertionapplication: rollout order, guardrails, and what each remaining consumer needs.End of the insertion Begin of the deletion application.End of the deletion

Begin of the insertion> **Note:** originally this WP was about *defining* theEnd of the insertion Begin of the deletion Focus:

* avoid fragmentation across libraries

* define a shared abstraction layer

* enable gradualEnd of the deletion migration Begin of the insertionstrategy andEnd of the insertion Begin of the deletion


### Scope

* Define a **DnDEnd of the deletion abstraction Begin of the insertionlayer. Both now exist — this WP was rewritten on 2026-07-12 into theEnd of the insertion Begin of the deletion layer**

* Standardize interaction patterns:

* list sorting

* cross-container moves

* multi-select behavior

* Ensure compatibility with:

* Stimulus controllers

* Turbo/morphing updates

* DefineEnd of the deletion rollout Begin of the insertiontracker.

End of the insertion Begin of the deletion plan:

* backlog → boards → other features


End of the deletion ### Begin of the insertionDecisions so farEnd of the insertion Begin of the deletion Key considerationsEnd of the deletion

* Begin of the insertion**Library**: Atlassian Pragmatic Drag and Drop, selected via the weighted evaluation in #PT-139. Evaluations: #DREAM-673 (dnd-kit — not selected), #DREAM-674 (Pragmatic — selected), #DREAM-675 (extend Dragula — rejected), #DREAM-676 (SortableJS — rejected).
End of the insertion Begin of the deletion Avoid direct coupling to any single library

End of the deletion * Begin of the insertion**Abstraction layer**: the reusable `sortable-lists` Stimulus suite — root/list/item controllers, pure drop-intent resolution (`drag-and-drop.ts`), a DnD-agnostic DOM contract (`list-dom.ts`), and a Turbo morph guard (`pragmatic-dnd-morph-attributes.ts`). Shape decided in #AGILE-292, implemented in https://github.com/opf/openproject/pull/23218.
End of the insertion Begin of the deletion Ensure:

End of the deletion * Begin of the insertion**Optimistic update contract**: successful same-list reorders answer with an event-only turbo-stream (no frame re-render) carrying `WORK_PACKAGE_MOVED_EVENT`; failures and cross-list moves keep the full frame reload. Decided in #AGILE-322 / https://github.com/opf/openproject/pull/24157 (a bare `204 No Content` was rejected — no body to carry the event).

End of the insertion Begin of the deletion accessibility support

* mobile compatibility

* extensibility


End of the deletion ### Begin of the insertionRollout sequenceEnd of the insertion Begin of the deletion Current assessmentEnd of the deletion

Begin of the insertion1. **Backlogs** — in review. #AGILE-291 (implementation: #AGILE-251, #AGILE-284, #AGILE-322; PRs https://github.com/opf/openproject/pull/23218, https://github.com/opf/openproject/pull/24157)
2. **Shared `generic-drag-and-drop.controller.ts` consumers** — #DREAM-671 (admin/settings sortable lists, work-package type export templates, meetings subclass)
3. **Independent Dragula Stimulus controllers** — `reporting/page.controller.ts`, `admin/type-form-configuration/rows-drag-and-drop.controller.ts`, `admin/custom-fields.controller.ts`
4. **Angular surfaces** — gated on the decision in #DREAM-678 (boards, work-package table/card view, team planner, BIM BCF list, draggable autocompleter, grids widgets)
5. **Remove the `dragula` npm dependency** once no consumer remains.End of the insertion Begin of the deletion ⚠️ **Critical path work**End of the deletion

Begin of the insertion### GuardrailsEnd of the insertion Begin of the deletion Without this:End of the deletion

* Begin of the insertionNo new Dragula consumers.
End of the insertion Begin of the deletion migration will fragment

End of the deletion * Begin of the insertionOneEnd of the insertion Begin of the deletion multipleEnd of the deletion DnD Begin of the insertionfoundation: new work builds on the `sortable-lists` primitives; avoid per-feature forks. (Angular CDK drag-drop usages are out of scope and stay on CDK until those surfaces are rewritten — see #DREAM-678.)
End of the insertion Begin of the deletion implementations will coexist

End of the deletion * Begin of the insertionAccessibility and mobile expectations (WCAG 2.1, touch) applyEnd of the insertion Begin of the deletion long-term maintenance cost will increase


### Decision status

➡️ Must be completed before full migration

### Linked PRs

* (linksEnd of the deletion to Begin of the insertionevery migrated surface: a11y follow-ups #AGILE-323 / #AGILE-324, touch #AGILE-293.
End of the insertion Begin of the deletion be added as implementation progresses)

End of the deletion * Begin of the insertionSame-list optimistic reordering on any new surface follows the #AGILE-322 response contract.End of the insertion Begin of the deletion references:

* dnd-kit experiments (WP #74176)

* Pragmatic DnD experiments (WP #74175)

* Dragula extensions (WP #74174)End of the deletion