Content
View differences
Updated by Alexander Coles about 17 hours ago
This work package captures the evaluation of **dnd-kit** as a potential replacement for Dragula.
The goal was to validate whether dnd-kit can support:
* backlog and board interactions
* integration with **Stimulus (non-React usage)**
* whole-card dragging
* migration of the existing `generic-drag-and-drop-controller`
### Work performed
* Implemented whole-card dragging for backlog items
* Attempted migration of the generic drag-and-drop controller
* Explored usage patterns outside React
### Key findings
* dnd-kit provides a **modern architecture (sensors, modifiers, extensibility)**
* Works well for **basic drag interactions**
* Integration outside React is **possible but not ergonomic**
* Requires **significant custom logic** for:
* cross-container behavior
* state synchronization
* No clear **first-class multi-select support**
* Adds complexity compared to current abstraction
### Current assessment
⚠️ **Partially viable, but high integration cost**
dnd-kit is technically capable, but:
* introduces complexity in a Stimulus/Turbo environment
* lacks clear multi-drag support
* requires building substantial infrastructure
### Decision status
➡️ Keep as **secondary candidate**
➡️ Not preferred unless stronger advantages emerge
Linked PRs
* [https://github.com/opf/openproject/pull/22838](https://github.com/opf/openproject/pull/22838)
* [https://github.com/opf/openproject/pull/22820](https://github.com/opf/openproject/pull/22820)
* [https://github.com/opf/openproject/pull/22819](https://github.com/opf/openproject/pull/22819)
### Outcome (final)
❌ **Not selected.** The weighted evaluation in #PT-139 scored dnd-kit third (290 of 380), behind Pragmatic Drag and Drop and SortableJS — chiefly on Stimulus/plain-JS ergonomics, cross-container support, and Turbo compatibility, consistent with the findings above. Pragmatic Drag and Drop was selected instead (#DREAM-674) and is being implemented via the shared `sortable-lists` Stimulus suite (#AGILE-291, https://github.com/opf/openproject/pull/23218).
No further work is planned here; this evaluation is closed.
The goal was to validate whether dnd-kit can support:
* backlog and board interactions
* integration with **Stimulus (non-React usage)**
* whole-card dragging
* migration of the existing `generic-drag-and-drop-controller`
### Work performed
* Implemented whole-card dragging for backlog items
* Attempted migration of the generic drag-and-drop controller
* Explored usage patterns outside React
### Key findings
* dnd-kit provides a **modern architecture (sensors, modifiers, extensibility)**
* Works well for **basic drag interactions**
* Integration outside React is **possible but not ergonomic**
* Requires **significant custom logic** for:
* cross-container behavior
* state synchronization
* No clear **first-class multi-select support**
* Adds complexity compared to current abstraction
### Current assessment
⚠️ **Partially viable, but high integration cost**
dnd-kit is technically capable, but:
* introduces complexity in a Stimulus/Turbo environment
* lacks clear multi-drag support
* requires building substantial infrastructure
### Decision status
➡️ Keep as **secondary candidate**
➡️ Not preferred unless stronger advantages emerge
Linked PRs
* [https://github.com/opf/openproject/pull/22838](https://github.com/opf/openproject/pull/22838)
* [https://github.com/opf/openproject/pull/22820](https://github.com/opf/openproject/pull/22820)
* [https://github.com/opf/openproject/pull/22819](https://github.com/opf/openproject/pull/22819)
### Outcome (final)
❌ **Not selected.** The weighted evaluation in #PT-139 scored dnd-kit third (290 of 380), behind Pragmatic Drag and Drop and SortableJS — chiefly on Stimulus/plain-JS ergonomics, cross-container support, and Turbo compatibility, consistent with the findings above. Pragmatic Drag and Drop was selected instead (#DREAM-674) and is being implemented via the shared `sortable-lists` Stimulus suite (#AGILE-291, https://github.com/opf/openproject/pull/23218).
No further work is planned here; this evaluation is closed.