feat(variable-list): add drag-and-drop functionality for variables in code node #22127
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
Implement drag-and-drop reordering of variables in the workflow editor using react-sortablejs. Added draggable handle icon that appears on hover when there are multiple variables. Each variable now has a unique ID to maintain state during reordering.
The property name 'p' was changed to 'v' to better represent its purpose as a variable container. This improves code readability and maintainability.
dosubot
bot
added
size:M
Contributor
There was a problem hiding this comment.
Pull Request Overview
Introduces drag-and-drop reordering of variables in the code node’s variable list using react-sortablejs.
- Adds imports for
ReactSortable,uuid, and a draggable icon - Generates per-item UUIDs and wraps the list in
ReactSortable - Displays a drag handle on hover when more than one variable is present
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
Outdated
Show resolved
Hide resolved
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
Outdated
Show resolved
Hide resolved
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
Outdated
Show resolved
Hide resolved
web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
Show resolved
Hide resolved
Use useMemo for listWithIds to optimize performance by avoiding unnecessary recalculations. Also rename payloadWithIds to listWithIds for better clarity.
dosubot
bot
added
size:L
dosubot
bot
added
size:M
Ensure unique keys for list items by using item.id when available, falling back to index. This prevents potential React key conflicts during re-renders.
…drag handle position Remove unnecessary mapping of list items with IDs and use direct variable references. Adjust drag handle position for better visual alignment.
crazywoola
approved these changes
Jul 16, 2025
tutkun
pushed a commit
to tutkun/dify
that referenced
this pull request
Aug 15, 2025
tutkun
pushed a commit
to tutkun/dify
that referenced
this pull request
Aug 16, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Implement drag-and-drop reordering of variables in the workflow editor using react-sortablejs. Added draggable handle icon that appears on hover when there are multiple variables. Each variable now has a unique ID to maintain state during reordering.
related #22066
Screenshots
after-.mp4
follow feat(question-classifier): add drag-and-drop sorting for topics list (#22066)
Checklist
dev/reformat(backend) andcd web && npx lint-staged(frontend) to appease the lint gods