thisbeyond
Auto-scroll support
Consider adding a builtin solution for auto-scrolling when dragging in scrollable containers.
Hi 👋,
is there an ETA for this feature ? It's really important for UX.
I tried to do it manually but the dragged element (the one moving in the list) isn't placed correctly which I suppose makes sense. I guess the fix to that should be quite simple by not only placing the moved element based on mouse movement but by also taking into account the scroll made since the start of the drag.
If I can do it myself on my end and not bother that'd be great but I didn't find any way how
Hey, I hope to do a pass on solid-dnd issues in the coming weeks.
I wonder if we can reuse the transformers to achieve this - so on scroll we compute the delta offset to use.
I forgot to get back to you, yeah I got something working in the end but it's not pretty and a bit messy
I can still share it if you want though
Hi again Martin,
Sure here's the code: https://gitlab.com/isaan/mapview-dev/mapview2/-/tree/solid/src/components/generic/sortable?ref_type=heads
It supports X auto scroll, Y auto scroll and in both directions simultaneously with a much more robust Y auto scroll since we didn't actually needed the X
Here's a preview:
https://solid--mapview2.netlify.app/stories
https://solid--mapview2.netlify.app/ (Try demo, scroll to the end and drag with the hand, can also open the dialog 'View all data' where when full screen more things are draggable)
Thanks @gawlk for sharing the code. I got the auto-scroll to work with your scrollEffectCallback function.
But how do you account for page scroll (see https://github.com/thisbeyond/solid-dnd/issues/26)? My draggable elements are disconnected from the mouse position as soon as I scroll.
Hi @clementmas,
The whole code that I linked is kind of a whole package (but fully headless though and without any style).
But to elaborate about how it works, the disconnect is fixed via the collisionDetector (link). It's the same as the default one (closest detector) used by the library with just a tiny fix which is the offset (link) added to the algorithm.
As seen on the first link, the offset is just the scroll position of the closest scrollable parent at the start of the drag minus the current scroll position and that's why you need all the rest of the code !
Thanks! I was missing the collisionDetector code. It works well now.
@martinpengellyphillips would you consider integrating this code to support auto-scroll as built-in feature?
@martinpengellyphillips Awesome news, my code didn't end up working properly in every use case due our use case and to the underlying code (which is not a critic ! not a single d&d lib worked properly)
So here's a good chalenge for you if you want to make this feature work as expected:
- Make the d&d work the same way inside of a
<body>but also inside of a<dialog>, many things can break but the most obvious one is the position of the dragged element - Having the auto-scroll (this issue) work in both the
<body>and a<dialog>- With a good feature being the stop of the auto-scroll when reached the end of the sortable element
- Having the auto-scroll work the same way with a mouse and a touch
Picking this up now :)
@martinpengellyphillips Sorry for asking (I absolutely don't want to rush) - have you managed to move forward with this feature?
I did have a run at it, but didn't make progress quickly and it started to drift into wider changes. I'll have another think though.
Oh man, I'm waiting for this feature like I'm waiting for Christmas to get a present... lol