Using drag 'n drop with `egui::selectable_value` or the like

[virtualritz]

I would like to make a list of egui::selectable_value()s reorderable. See my app, Glyphana.

On the left panel there is a list of categories, one of which (and maybe later several) can be selected but which I also want to be reordeable using drag 'n drop.

Think of the list of favorite folders in macOS Finder or Dolphin on KDE. You can click to select a folder but you can also drag 'n drop to reorder your favorites.

I added support for this in the dnd branch of Glyphana. But I can only reorder categories, I can't select one any more. I.e. hovering immediately causes the drag 'n drop cursor to appear.

Instead drag 'n drop should only happen when the user presses the mouse button and starts dragging (i.e. some time passed so this is not confused with accidentally moving the mouse while clicking).

[lucasmerlin]

Was able to reproduce this with a simple button, I think this might be related to the above issue.

I think you should be able to work around this by using a separate drag handle like so:

                            // Anything in the handle can be used to drag the item
                            handle.ui(ui, item, |ui| {
                                ui.label("☰");
                            });
                            ui.selectable_value(&mut self.selected_category, item.id(), &item.name);

But I agree that dragging the label directly would be a lot better.

Your project is nice! To get it to run on MacOS I had to remove the gtk dependency from your project by the way. I think it's not needed anymore?

[virtualritz]

I think you should be able to work around this by using a separate drag handle like so:

Yeah, I tried this first, even before filing this issue. It doesn't look very nice (even if the drag handle is on the right and right-aligned. It is also not a pattern people are used to very much.

I'll just wait until your crate supports this use case. :)

[virtualritz]

Your project is nice!

Thanks heaps.

To get it to run on MacOS I had to remove the gtk dependency from your project by the way. I think it's not needed anymore?

Actually, there were a bunch more, I just ran cargo machete. Thanks for pointing that out.

[lucasmerlin]

I did a big refactor of this library, this should be fixed now. I haven't released a new version yet but you should be able to try this if you add egui_dnd as a git dependency. @virtualritz can you try if this works for you now?

[virtualritz]

Looks fixed in my Glyphana dnd branch.

Do I still need the separate burger button with the fix?

[lucasmerlin]

No, it should now be possible to use the selectable_value as drag handle

[virtualritz]

It works but the drag cursor (hand) is shown on hover. The cursor should change to the hand when dragging. Otherwise it should be a normal, unassuming pointer.

[virtualritz]

The other thing I noticed is that the alignment is now broken. I.e. the selectable_labels created with egui_dnd::dnd() have a different alignment than those created as-is.

See red line in the screenshot below. Everything below the horizontal bar is created inside a egui_dnd::dnd().

[lucasmerlin]

alignment is now broken

Oh, I didn't notice that. I cleaned it up, the alignment should be identical with and without drag and drop ui now.

It works but the drag cursor (hand) is shown on hover.

In my opinion the hand should be shown when hovering so the user knows he can drag here, and then the grab when the user is actually dragging. But I've made the hovering cursor configurable on the handle.

[virtualritz]

In my opinion the hand should be shown when hovering so the user knows he can drag here, and then the grab when the user is actually dragging.

That's not how it works in any implementation I know. E.g. favorite folders on the left side of KDE's Dolphin/macOs's Finder windows or the character categories of macOS's Character Viewer.

Showing a hand for anything that can be drag'd n drop'd would add a lot of noise to the cursor shape while moving across such parts of the UI, no?

I think calmness of the common experience (which is selection, not dragging) trumps discoverability in UX here.

But I've made the hovering cursor configurable on the handle.

Awesome! Thanks heaps.

[lucasmerlin]

True, I guess it comes down to context and preference. Closing this now, thanks for testing the changes!