useGesture drag and drop scroll behavior
After watching one of Theo's videos I've descided to try to reimplement drag and drop (which was previously using react-beautiful-dnd) to useGesture. i got everything working great but the last thing i need is for the UI to cooperate with scroll. Right now i have 2 problems that i dont really know how to solve.
1. When im holding a card and scroll with the mouse wheel the cursor position desyncs from the card's position.
2. I want the list to scroll when im holding a card and am hovering over the bottom / top of the list. i had an idea to do this by adding a transparent div that would trigger scrolling when i am holding a card and on top of that div. However, i don't seem to get any mouse events while dragging and even if I did I don't really know how to control the rate of scroll in a clean way.
Does anyone know how I might do this? Theo also recommended dnd-kit in the same video but I've already implemented drag and drop twice and would prefer not to do it again. (I also spent a lot of time on the animations and would prefer not to lose them).
My code is heavily based on this example from the docs: https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/draggable-list
Video by Theo: https://www.youtube.com/watch?v=ieNQ9kuN3dU
1. When im holding a card and scroll with the mouse wheel the cursor position desyncs from the card's position.
2. I want the list to scroll when im holding a card and am hovering over the bottom / top of the list. i had an idea to do this by adding a transparent div that would trigger scrolling when i am holding a card and on top of that div. However, i don't seem to get any mouse events while dragging and even if I did I don't really know how to control the rate of scroll in a clean way.
Does anyone know how I might do this? Theo also recommended dnd-kit in the same video but I've already implemented drag and drop twice and would prefer not to do it again. (I also spent a lot of time on the animations and would prefer not to lose them).
My code is heavily based on this example from the docs: https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/draggable-list
Video by Theo: https://www.youtube.com/watch?v=ieNQ9kuN3dU
CodeSandbox
spring-draggable-list using @react-spring/web, @use-gesture/react, lodash-move, lodash.clamp, react, react-dom, react-scripts
YouTubeTheo - ping․gg
Was harsher than I should have been initially so I trimmed this up. I still don't recommend react-beautiful-dnd and I still hate all the software Atlassian sells. Maintainers worked hard to make this lib and I respect them for it.
ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://twitch.tv/theo
ALL MY BEST MEMES ARE ON TWITTER FIRST https://tw...
ALL MY CONTENT IS FILMED LIVE ON TWITCH AT https://twitch.tv/theo
ALL MY BEST MEMES ARE ON TWITTER FIRST https://tw...
Was this page helpful?
