**Replace the legacy Dragula-based implementation with a modern, framework-agnostic drag-and-drop solution that supports current backlog/board use cases and enables future interaction patterns.**

The new solution must:

* Integrate cleanly with **Stimulus and plain JavaScript/TypeScript** Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Provide **robust mobile and tablet support** Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Support **cross-container sorting**, **empty-state drops**, and **auto-scroll** Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Enable **multi-item selection and drag** Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Meet **WCAG 2.1 accessibility expectations**, including screen reader announcements and non-DnD alternatives Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Support **rule-based constraints** for allowed drop targets Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Be **extensible** to support future interaction patterns (e.g. long-press, advanced gestures) Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Serve as a **standard DnD foundation across the application** Begin of the insertion

End of the insertion Begin of the deletion


End of the deletion This EPIC includes:

* Evaluation and selection of a DnD library Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Migration of backlog and board interfaces Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Establishment of shared abstractions/utilities Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Accessibility and fallback interaction patterns Begin of the insertion
End of the insertion Begin of the deletion

End of the deletion * Gradual replacement of Dragula across the codebase Begin of the insertion

End of the insertion Begin of the deletion


End of the deletion ### Begin of the insertionDecisions & current state (July 2026)

* **Library selected: Atlassian Pragmatic Drag and Drop.** Chosen after hands-on evaluation of dnd-kit (#DREAM-673), Pragmatic Drag and Drop (#DREAM-674), extending Dragula (#DREAM-675, rejected) and SortableJS (#DREAM-676, rejected). The weighted KPI evaluation with methodology and per-criterion rationale lives in #PT-139 (internal).
* **Shared foundation exists.** The reusable `sortable-lists` Stimulus suite (root/list/item controllers, pure drop-intent resolution, `list-dom` DOM contract, Turbo morph guard) is the abstraction layer this epic called for. Its shape was decided in #AGILE-292.
* **First consumer: Backlogs.** Feature #AGILE-291; implementation PRs https://github.com/opf/openproject/pull/23218 (migration + optimistic reordering) and https://github.com/opf/openproject/pull/24157 (server support for optimistic reordering), both in review.
* **Remaining work**: migrate the shared generic-drag-and-drop controller consumers (#DREAM-671), rollout sequencing and guardrails (#DREAM-677), the Angular-surfaces decision (#DREAM-678), and accessibility/touch follow-ups (#AGILE-323, #AGILE-324, #AGILE-293).

###End of the insertion Risks / open questions

* Multi-select drag support across candidate libraries Begin of the insertion— *still open: Pragmatic has no first-class multi-drag; a multi-select layer must be built on top (see #PT-139)*
End of the insertion Begin of the deletion

End of the deletion * Accessibility implementation effort (especially for screen readers) Begin of the insertion— *being addressed in #AGILE-323 / #AGILE-324*
End of the insertion Begin of the deletion

End of the deletion * Integration with Turbo DOM morphing Begin of the insertion— *resolved for Backlogs via the `pragmatic-dnd-morph-attributes` Turbo guard (https://github.com/opf/openproject/pull/23218)*
End of the insertion Begin of the deletion

End of the deletion * Integration with legacy Angular UI Begin of the insertion— *open, tracked as #DREAM-678*
End of the insertion Begin of the deletion

End of the deletion * Behavior consistency across touch and desktop Begin of the insertion— *open, tracked as #AGILE-293*
End of the insertion Begin of the deletion

End of the deletion * Performance with larger lists (~100 items per container)