I’m looking at possibly changing my main menu from TreeGrid to SideNav.
One of the challenges is that with my TreeGrid I allow users to rearrange a “favourites” section using regular Grid Drag&Drop. Is it possible to do something similar with SideNav?
Looking at How to implement drag and drop in Vaadin, I assume I could make all favourites entries draggable, and let all listen for drag end, but I assume I can’t distinguish between “in front of” and “after”
Yes, it’s doable. But there’s not much ready-made, so you need to build it from scratch with JS. I’m not sure if it’s relevant in your situation, but in general, you should offer an alternative way to accomplish the same use case (rearrange the favorites section), so that people with motor skill issues or lack of a mouse can also use it.
but I assume I can’t distinguish between “in front of” and “after”
For that, you need to use the X and Y coordinates from the drop event, and calculate where the drop happened.
Thanks. Then we’ll stick with our TreeGrid menu for now.
I don’t disagree, but I’m going to go off on a tangent anyway; There is the danger of letting the perfect be the enemy of the good. If everything needs an alternative way and you can’t think of one, you risk not doing it at all.
I’ll join you on this tangent 
Yes, aiming for perfection rarely is the winning formula. In the case of drag’n’drop, it should be consider as progressive enhancement, and you should first implement something that works for everyone, and then consider building a d’n’d version to speed it up for those who can benefit from it.
Vaadin and our Grid and Tree Grid are an interesting case, though. Vaadin makes it easy to enable drag’n’drop for them, so that’s of course the one you implement first. And then it’s easy to move on to the next thing, because of better ROI in other features. If you’d have to build d’n’d support from scratch (like it would be with Side Nav), you would likely first implement the version that works for everyone, because that would be less effort.
If we’d build the d’n’d support for Grid/Tree Grid today, accessibility would be taken better into consideration out of the box, like we recently did with the Dashboard component: Dashboard | Components | Vaadin Docs
I haven’t looked at the Dashboard component before since it’s commercial, but that was actually quite neat. The keyboard handling seemed full-featured and pleasant 
I built a third party addon to reorder Vaadin components:
You can build it manually with the Vaadin drag and drop and add a drop event on the layout and on the side nav and calculate if you want to drop it before or after.
Normally the addon is doing this for you with nice animations.
In term of accessibility, the addon doesn’t help, maybe I should take a look of how to improve it.
Nice addon. I’ll have to remember it for later, but just to be clear:
This does not work for SideNav, since SideNav does not implement HasComponents, right?
I didn’t think about this but that’s true.
I can check if it can accept a SideNav and update the addon.