I worked at an ed-tech startup that allowed teachers to use our bank of questions to create assignments for their students. We found that drag and drop came with a few issues, such has having to implement keyboard accessibility separately from the drag and drop mechanism, moving things when the number of items is big, and some general confusion around certain UX.<p>The solution we ended up with, which is similar to the OP, is what we affectionately called Pick n Plop. I.e. you select an item, the UI tells you where it can go, and you click again to place it. You get keyboard accessibility for free since it's just buttons.<p>Demo right here (sorry for the terrible quality): <a href="https://giphy.com/gifs/9KgZorKdwdsaolomxS/fullscreen" rel="nofollow">https://giphy.com/gifs/9KgZorKdwdsaolomxS/fullscreen</a>
I used a software that required you to drag the mouse to draw lines to connect components and I remember several other users getting pain in their wrists from the repeated dragging action with the mouse. The act of pressing the button and dragging seems to be much less ergonomic than moving the mouse alone. So I now think that two separate clicks should be preferred.
I feel like this discussion can’t be complete without dragon drop: <a href="https://mrcoles.com/dragondrop/" rel="nofollow">https://mrcoles.com/dragondrop/</a>
Every time I think about this problem (whether it's clicking-drag to re-order, or click-and-swap as described here) I always wonder if there's some smart "box packing" algorithm that will just distribute the elements with some "suggestions" (x,y) about where they should fit and let the algorithm place everything.
Fwiw I hate drag and drop on left click, I wish it was on right click (or even better required a key press at the same time).<p>Its way to easy to accidentally do. I am often left with not know what happened and having to ctrl-z in my desktop environment.. something which is equally scary (something somewhere was undone).
I have found that drag and drop is an awful UX pattern in recent years.<p>Via a physical mouse, it's fine. But trackpads are such a common set up these days and you cannot reliably drag and drop, especially since sometimes you need to lift a finger to drag further. The only solution I can think of would be to have a key that initiates a drag and you can hold the key while to continue the drag - but there's currently no standardisation in this pattern
Cool to see what looks like diagrams made in Excalidraw. Never thought I'd see a professional use case for messy diagrams, but I really enjoyed the look and feel of those diagram. It felt refreshing compared to the usual diagrams that I see which often lack artistic merit.
A lot of GUI paradigms can benefit from being a little less similar to their physical counterparts.<p>Especially visual programming. Probably would be way more successful if they would abandon the free "Put nodes anywhere and connect them" model for a lists-and -trees kind of model.
How is the grid-wrapper element able to reposition the grid-item elements on a state change? Probably not the render function, since there will be only a slot element inside grid-wrapper? Does it set the position after the render with setting inline css?