Vertical scroll for Draggables bound to X-axis

[amangeot]

Hello,
There is a feature I'd like to add: the idea is to prevent the Draggable from intercepting vertical scroll events if bound to the horizontal axis.

Let's say we have a <Draggable axis='x' />, it would be great to only drag the Draggable on horizontal drags, and let the container / page scroll on vertical drags ?

This is the default behaviour for scrollable items on mobile devices. I have no idea how to implement it but I believe it could be useful to many. Is it doable ?

[STRML]

Watch onStart, and return false. https://github.com/mzabriskie/react-draggable/blob/master/lib/DraggableCore.es6#L230

[amangeot]

I went through to code of Draggable and DraggableCore to better understand. I tried returning false from the onStart hook as you said, but it didn't work. I also tried it on v2.2.2 as an e.preventDefault was added to DraggableCore's handleDrag in v2.2.3, but it didn't work either.

I would like to let the parent / page / body receive vertical drags and scroll as if the Draggable was a simple div.

---

Here is a link to picture what I mean : https://ibb.co/iyGxBF.
The draggable can only be dragged horizontally, acting as a slider. In red is the problem / feature I mentioned

[STRML]

Hmm, you shouldn't have any problem if you use the axis property. I can't help you further without a runnable example.

[amangeot]

From your demo http://mzabriskie.github.io/react-draggable/example/

When you drag the second item "I can only be dragged horizontally (x axis)" vertically, it doesn't move the item (as expected) but it also doesn't let the page scroll.

I wish the page could scroll vertically when the item is bound horizontally (to the x-axis). This is the behaviour for html elements with horizontal overflow: dragging vertically will let the container scroll, while dragging horizontally will scroll the item.

Thank you for the quick replies as always !

[amangeot]

@STRML Does it sound doable to you ?

If you have some ideas, I will try to implement them and do a pull request

[bahtiyara]

So what is the solution for this problem ?

[miketdonahue]

Was there ever a solution for this?

[teceer]

Hi, this works for me:

onDrag={(e, data) => {
window.scrollBy(0, -data.y);
}}