Skip to content

Drag and Drop List component#198

Open
ddudenin wants to merge 12 commits intoDioxusLabs:mainfrom
ddudenin:main
Open

Drag and Drop List component#198
ddudenin wants to merge 12 commits intoDioxusLabs:mainfrom
ddudenin:main

Conversation

@ddudenin
Copy link
Contributor

@ddudenin ddudenin commented Feb 4, 2026

Plan

  • Implement new component.
  • Drag and Drop with removable items.
  • Pass tests.
    • Compilation.
    • Check, clippy tests.
    • Doc comments.
    • Playwright.

Fixes #141

@ddudenin ddudenin marked this pull request as ready for review February 7, 2026 08:38
@github-actions
Copy link

github-actions bot commented Feb 7, 2026

@ddudenin
Copy link
Contributor Author

ddudenin commented Feb 7, 2026

@ealmloff I would like to introduce a new component to the Dioxus collection.

@ealmloff
Copy link
Member

ealmloff commented Feb 9, 2026

We need keyboard support for drag and drop before we can add this to dioxus primitives. https://react-aria.adobe.com/dnd#accessibility and the kanban board example might be useful as a reference. They let you select drag and drop elements with enter, move them with arrow keys and then drop them with enter

@ddudenin
Copy link
Contributor Author

@ealmloff I added the ability to move elements using the keyboard

@ddudenin
Copy link
Contributor Author

I've added a separate class for icons.
If you give me the go-ahead, I'll reuse this class in the future (as a separate MR) across all source files.

I find this implementation useful for several reasons:

  1. All icons are mostly created with the same parameters, meaning that only the internal content changes, which is sufficient to pass to the component. This will also help avoid excessive code duplication.
  2. I looked at the spinner implementation from shadcn; it also uses icons, so this will essentially be the first step in implementing such a component. Later, by adding a simple animation, we'll have another component with minimal effort.
  3. In the future, if we want to create our own icon collection, this class will become a reliable foundation.

@ealmloff
Copy link
Member

Yes, that would be much nicer

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.

Drag and drop list

2 participants