Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertical scroll for Draggables bound to X-axis #221

Closed
amangeot opened this issue Jan 24, 2017 · 8 comments
Closed

Vertical scroll for Draggables bound to X-axis #221

amangeot opened this issue Jan 24, 2017 · 8 comments

Comments

@amangeot
Copy link

amangeot commented Jan 24, 2017

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 ?

@amangeot amangeot changed the title Vertical scroll for Draggables bound to X-axis Vertical swipe for Draggables bound to X-axis Jan 24, 2017
@amangeot amangeot changed the title Vertical swipe for Draggables bound to X-axis Vertical scroll for Draggables bound to X-axis Feb 24, 2017
@STRML
Copy link
Collaborator

STRML commented Mar 6, 2017

@STRML STRML closed this as completed Mar 6, 2017
@amangeot
Copy link
Author

amangeot commented Mar 6, 2017

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
Copy link
Collaborator

STRML commented Mar 6, 2017

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

@amangeot
Copy link
Author

amangeot commented Mar 6, 2017

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
Copy link
Author

@STRML Does it sound doable to you ?

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

@bahtiyara
Copy link

bahtiyara commented Sep 15, 2018

So what is the solution for this problem ?

@miketdonahue
Copy link

Was there ever a solution for this?

@teceer
Copy link

teceer commented Oct 29, 2023

Hi, this works for me:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants