refactor(ui5-list, ui5-tree, ui5-list-item-group): extract drag-and-drop logic #11928
+223
−148
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rop logic - Create reusable DragAndDropHandler delegate class - Refactor List, Tree, and ListItemGroup to use shared handler - Remove duplicated drag and drop logic across components - Improve maintainability and consistency of drag/drop behavior - Support configurable drag validation and placement filtering This consolidates ~200 lines of duplicated code into a single, configurable handler that can be reused across all drag-enabled components. Fixes #11120
There was a problem hiding this comment.
Pull Request Overview
This PR refactors drag-and-drop functionality across UI5 components by extracting common logic into a reusable DragAndDropHandler delegate class. The refactoring eliminates code duplication while maintaining the existing drag-and-drop behavior.
- Creates a new DragAndDropHandler delegate class with configurable options for different component needs
- Refactors List, Tree, and ListItemGroup components to use the shared handler instead of duplicated logic
- Consolidates approximately 200 lines of duplicated drag-and-drop code into a single, maintainable handler
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/main/src/delegate/DragAndDropHandler.ts | New delegate class providing configurable drag-and-drop functionality with validation and filtering options |
| packages/main/src/Tree.ts | Replaces inline drag-and-drop logic with DragAndDropHandler instance configured for tree-specific behavior |
| packages/main/src/ListItemGroup.ts | Refactors to use DragAndDropHandler with group-specific placement filtering |
| packages/main/src/List.ts | Updates to use DragAndDropHandler with original event handling enabled |
dobrinyonkov
requested changes
Jul 24, 2025
| this._dragAndDropHandler = new DragAndDropHandler(this, { | ||
| getItems: () => this.items, | ||
| getDropIndicator: () => this.dropIndicatorDOM, | ||
| filterPlacements: (placements, draggedElement, targetElement) => { |
There was a problem hiding this comment.
Let's have the filterPlacements handler as a class member as well, to keep the constructor code shorter
| // Initialize the DragAndDropHandler with the necessary configurations | ||
| // The handler will manage the drag and drop operations for the tree items. | ||
| this._dragAndDropHandler = new DragAndDropHandler(this, { | ||
| getItems: () => { |
There was a problem hiding this comment.
Here as well, to keep the constructor readability, make all handlers members of the class end bind them
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This consolidates ~200 lines of duplicated code into a single, configurable handler that can be reused across all drag-enabled components.
Fixes: #11120