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

Way to listen to onDrag / onScroll callbacks during dragAndMove? #4544

Open
edooley opened this issue May 5, 2023 · 2 comments
Open

Way to listen to onDrag / onScroll callbacks during dragAndMove? #4544

edooley opened this issue May 5, 2023 · 2 comments

Comments

@edooley
Copy link

edooley commented May 5, 2023

Just purchased my pro license and loving it! Great work @alvarotrigo. I am interested in listening for the state changes on the dragAndMove extension for when dragging is actively happening, even if the drag is not enough to trigger a section transition. I see in the minified source mentions of onDrag and onScroll and was curious if these are publicly reachable somehow? Thanks!

@alvarotrigo
Copy link
Owner

Unfortunately, those events are not available at the moment.

I'll keep the topic open and mark it as a possible enhancement!

@edooley
Copy link
Author

edooley commented May 5, 2023

Sounds good. FWIW, if anyone else is trying to do this (I have elements on the page that I want to shift based on the active drag), here is the workaround I've been doing:

  1. Add event listeners to touchmove, touchstart, and touchend to each of your sections or to the entire window.
  2. In touchmove, obtain the drag delta of the current section with sectionElem.getBoundingClientRect().top. Use this to calculate and adjust other elements accordingly. Note: I had CSS transition effects on these elements to apply animations during onLeave events (i.e. if you do a fast swipe and release, then the only way to animate these floating elements would be to trigger something during a fullpage lifecycle event like onLeave). I had to remove the transition styles in touchstart and reapply them in touchend otherwise the translation logic I was applying in realtime during the drag itself was too sluggish.
  3. To detect if a drag resulted in a section change or not (i.e. to "snap back" any of your shifted elements), I am currently having to use a setTimeout to detect if the active section changed (by storing the previous value and comparing it to destination.index in onLeave). You have to add the delay because your finger lift will trigger touchend immediately, but it looked like onLeave was the earliest lifecycle callback available which hasn't quite fired at that point. This was the point where I jumped in here in hopes of finding something more durable, but at the moment this approach is working well enough for our purposes.

Hope it helps someone!

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

No branches or pull requests

2 participants