-
Notifications
You must be signed in to change notification settings - Fork 301
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
Exclude children from the gesture #433
Comments
Responding to your last comment: it doesn't feel very idiomatic (in a react sense, but I understand the lib is meant to work for all JS frameworks including vanilla) to
For react, this use case seems to be most compatible with the Context API ; ie a provider at the useGesture level (useGesture and the child component would both subscribe to this context to communicate) For the general vanilla JS purpose, I would rely on an element property (ex. use-gesture-ignore="true"), or something along those lines. This is less ideal for React as custom properties are not idiomatic, and don't work in a straightforward way if you want to wrap a fragment / list. I find the react-dnd lib extremely well designed in this aspect, it allows to very easily and modularly communicate between drag / drop components without any prop sharing whatsoever. |
Can you point at where react-dnd is using the context api? Honestly it feels a bit convoluted to be using a |
the provider could be used optionally (only if you need a child to get access to the gesture / the gesture state) |
Would you be up for a PR? Note that the core package is platform agnostic (ie not React specific). |
I am under water with work but I'm putting a task in my todos to do this as soon as things clear out, would love to help |
I personnally use @vueuse/gesture based on this library... I have the same problem : my users want to still select texts or have a "normal" behavior of the website. As i didn't found anything in gesture options and as the "target" option juste do nothing (= event still triggered on children) what i did is basically check if the dom element of the state.event is the one i want based on classList..contains(example) and element.id = the one i want.. Example : const handler = (state: any): void => {
} // Composable usage Maybe someone will have a more elegant way to achieve this... |
I tried the same logic but the state offset still seems to be getting updated even though the draggable element didn't get dragged. So when I actually drag the element there is a sudden jerk. |
this worked for me but idk if its ideal |
cc @odusseys
Discussed in #428
Originally posted by odusseys January 19, 2022
Hi,
Is there a way to exclude specific children of an element from triggering the gesture / getting events as they should ? For example, is there a way to correctly select text within a draggable elements ?
The text was updated successfully, but these errors were encountered: