Skip to content

feat(transfer): implement drag-n-drop functionality for transfer#1758

Open
arina-gutuboe wants to merge 5 commits into
masterfrom
LIBS-764/transfer-items-drag-and-drop
Open

feat(transfer): implement drag-n-drop functionality for transfer#1758
arina-gutuboe wants to merge 5 commits into
masterfrom
LIBS-764/transfer-items-drag-and-drop

Conversation

@arina-gutuboe

@arina-gutuboe arina-gutuboe commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Implements LIBS-764


Description

Implements drag-and-drop functionality for the Transfer component, built on top of @dnd-kit/core.

Options can now be dragged between the source and picked lists with a pointer, in addition to the existing action buttons and double-click.
When enableOrderChange is set, the picked list can also be reordered by dragging, and options dropped onto it are inserted at the drop position; without that flag, dropped options are appended to the end.
Dragging a highlighted option drags the whole highlighted set.

Changes include:

  • A new useTransferDnd hook and a set of pure helper functions (resolveDropTarget, resolvePositionalIndex, getDraggedValues, addSourceOptionsOnDrop, reorderPickedOptionsOnDrop), with unit tests.
  • New DraggableOption and TransferDragOverlay components (drag overlay with fly-back/fade drop animation for cancelled or no-op drops).
  • Updates the transfer-related features to integrate the DnD logic with existing highlighting/filtering behavior.
  • Updated documentation and added new Storybook demos: Drag and drop, Drag and drop without reordering, Drag and drop with disabled options.

Checklist

  • API docs are generated
  • Tests were added
  • Storybook demos were added

Video

https://dhis2.atlassian.net/browse/UX-183?focusedCommentId=249751

@dhis2-bot

Copy link
Copy Markdown
Contributor

🚀 Deployed on https://pr-1758--dhis2-ui.netlify.app

@dhis2-bot
dhis2-bot temporarily deployed to netlify July 22, 2026 08:13 Inactive
@dhis2-bot
dhis2-bot temporarily deployed to netlify July 22, 2026 08:37 Inactive
@sonarqubecloud

Copy link
Copy Markdown

@dhis2-bot
dhis2-bot temporarily deployed to netlify July 22, 2026 08:47 Inactive
@arina-gutuboe
arina-gutuboe marked this pull request as ready for review July 22, 2026 08:55
@arina-gutuboe
arina-gutuboe requested a review from a team as a code owner July 22, 2026 08:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants