Conditional drag event

[manelio]

So far, I have been using a custom library for gesture management. The main function is to deploy sidebars in my web application by dragging from any part of the document.

I want to focus on other aspects of the application and avoid maintaining my gesture library, so I'm considering migrating to pmndrs/use-gesture.

There is a scenario that I would like to know how to approach:

Mobile application. Let's suppose I have a div wrapper that wraps my entire application (I haven't seen how to associate useDrag with the document object, which I think would be ideal).

When I drag the wrapper to the right, I open the left sidebar as much as the dragging distance. On release, I decide whether to change the state of the sidebar to open or closed.

So far, so good.

In the application, there are a series of tables and blocks that require horizontal scrolling.

What I want is for this scroll to function normally and for the sidebar deployment to remain disabled when scrolling, except when the horizontal scroll is at position 0.

That is, the drag event should be conditional depending on whether the pointer was on an element with horizontal scrolling.

I would appreciate any idea or suggestion.

Thanks in advance.

[dbismut]

@manelio I'm not sure I got this fully.

I haven't seen how to associate useDrag with the document object, which I think would be ideal

This should work (but not SSR compatible).

useDrag(yourHandler, { target: document })

What I want is for this scroll to function normally and for the sidebar deployment to remain disabled when scrolling, except when the horizontal scroll is at position 0.

I might not be getting this right: but you could only perform a drag when the scroll position is 0. What's tricky is that you'll still get elastic scrolling when going out of bounds, and also if you use pointer events your event will be canceled.

To make this productive, I suggest we discuss over this on Discord, my username is dbismut. Scrolling and dragging interactions living simultaneously on the same element is always a bit tricky.

[manelio]

Thanks for your time @dbismut.

Indeed, with { target: document } I get what I wanted.

And you are right. I've been digging deeper and allowing drag in the document on a conditionally scrollable div is more complicated than it seemed.

Anyway I'm still investigating and will update the thread if I come up with a solution.

[dbismut]

@manelio if this is of any interest, you can have a look at this thread: https://twitter.com/davidbismut/status/1520691634039578626

The prototype has a magnetic drag switch from one page to another, but it uses elastic scrolling.