Content
View differences
Updated by Alexander Coles about 1 month ago
### Core drag-and-drop capabilities
* Reorder within a list
* Move items across lists/containers
* Support dropping into empty containers
* Auto-scroll within scrollable containers and viewport
* Support both:
* whole-item drag (see <mention class="mention" data-id="73473" data-type="work_package" data-text="#73473">#73473</mention> )
* handle-based drag (configurable per context)
* Provide visual feedback:
* placeholder / insertion indicator
* drag preview/ghost element (configurable)
### Advanced interactions
* Multi-item selection and drag
* Configurable constraints for allowed moves (e.g. type-based rules - needed for Boards)
* Support for delayed drag start on touch (to preserve scroll usability)
### UI coverage
* **Backlog UI supports:**
* reorder within list
* move across lists
* empty-list drops
* multi-select drag (see <mention class="mention" data-id="73729" data-type="work_package" data-text="#73729">#73729</mention> )
* auto-scroll
* **Board UI supports:**
* whole-card drag
* multi-select drag
* **Project attributes UI supports:**
* section reorder
* item reorder across sections
UX Interactions for Backlogs and Boards are also documented here: [https://community.openproject.org/documents/207](https://community.openproject.org/documents/207)
### Accessibility
* Screen reader announcements implemented for drag-and-drop actions
* Non-DnD alternatives available for all operations (e.g. move up/down, move to container)
* Interaction patterns aligned with WCAG 2.1 expectations
### Platform support
* Works on:
* desktop (macOS, Windows and Linux keybindings supported)
* mobile
* tablet
* Supports mouse, touch, and pointer input
### Integration (tech requirements)
* Implemented via Stimulus controllers (or custom elements)
* Compatible with Turbo/morphing updates
* Supports server-driven DOM updates without breaking DnD state
* Supports optimistic UI updates with rollback on failure
### Architecture
* Shared DnD abstraction layer defined
* No direct library usage scattered across features
* Library-specific implementation isolated behind abstraction
* Extensible to support future interaction patterns (e.g. long-press, gestures)
### Definition of Done
* Dragula is no longer used in migrated areas
* Selected DnD solution is documented and agreed upon
* Abstraction layer is documented with usage guidelines
* At least one additional feature (beyond backlog/board) adopts the abstraction
* Accessibility approach is validated (manual + tooling where applicable)
### Alternatives considered and rejected
#### 1\. Native HTML5 Drag and Drop (no library)
#### 2\. Sticking with Dragula
* Reorder within a list
* Move items across lists/containers
* Support dropping into empty containers
* Auto-scroll within scrollable containers and viewport
* Support both:
* whole-item drag (see <mention class="mention" data-id="73473" data-type="work_package" data-text="#73473">#73473</mention> )
* handle-based drag (configurable per context)
* Provide visual feedback:
* placeholder / insertion indicator
* drag preview/ghost element (configurable)
### Advanced interactions
* Multi-item selection and drag
* Configurable constraints for allowed moves (e.g. type-based rules - needed for Boards)
* Support for delayed drag start on touch (to preserve scroll usability)
### UI coverage
* **Backlog UI supports:**
* reorder within list
* move across lists
* empty-list drops
* multi-select drag (see <mention class="mention" data-id="73729" data-type="work_package" data-text="#73729">#73729</mention> )
* auto-scroll
* **Board UI supports:**
* whole-card drag
* multi-select drag
* **Project attributes UI supports:**
* section reorder
* item reorder across sections
UX Interactions for Backlogs and Boards are also documented here: [https://community.openproject.org/documents/207](https://community.openproject.org/documents/207)
### Accessibility
* Screen reader announcements implemented for drag-and-drop actions
* Non-DnD alternatives available for all operations (e.g. move up/down, move to container)
* Interaction patterns aligned with WCAG 2.1 expectations
### Platform support
* Works on:
* desktop (macOS, Windows and Linux keybindings supported)
* mobile
* tablet
* Supports mouse, touch, and pointer input
### Integration (tech requirements)
* Implemented via Stimulus controllers (or custom elements)
* Compatible with Turbo/morphing updates
* Supports server-driven DOM updates without breaking DnD state
* Supports optimistic UI updates with rollback on failure
### Architecture
* Shared DnD abstraction layer defined
* No direct library usage scattered across features
* Library-specific implementation isolated behind abstraction
* Extensible to support future interaction patterns (e.g. long-press, gestures)
### Definition of Done
* Dragula is no longer used in migrated areas
* Selected DnD solution is documented and agreed upon
* Abstraction layer is documented with usage guidelines
* At least one additional feature (beyond backlog/board) adopts the abstraction
* Accessibility approach is validated (manual + tooling where applicable)
### Alternatives considered and rejected
#### 1\. Native HTML5 Drag and Drop (no library)
#### 2\. Sticking with Dragula