drag the whole component but make it draggable from the child component

[mzumberi]

how do i achieve the fact that i want to drag the component but it only drags in the boundaries of the child component? using react-spring and @use-gesture/react possibly with useGesture hook
let's suppose i have this structure

<div id="the-component-to-drag">
   <button> i can drag the whole parent component</button>
   <button> i do some thing else and i can't drag the component</button>
   <button> i also do something else and i can't drag the component </button>
</div>

[dbismut]

Please provide a sandbox to iterate from.

[mzumberi]

hi @dbismut absolutely, this is the code sandbox

you will find an animated.div that is draggable, but what i want to achieve is that only the first button (labelled as "i want to drag my parent element") can drag the whole Bar component while the other remaining buttons shouldn't be able to drag anything

(also animated.div which is the parent should not be able to drag itself)

[dbismut]

One way with stopPropagation: https://codesandbox.io/p/sandbox/react-use-gesture-child-drags-the-whole-component-forked-enodr5

Since useGesture adapts the handler starting the drag depending on the device, you need to event.stopPropagation() on pointerdown, mousedown and touchstart events.

It uses bind(), you can achieve the same thing with the target: ref api but you'd have to use event listeners in useEffect — I can expand on that, but it's basically linked to this: https://twitter.com/davidbismut/status/1508832951420825600.

Another way with a data attribute on non activating elements: https://codesandbox.io/p/sandbox/react-use-gesture-child-drags-the-whole-component-forked-02rvt4

Probably less performant, especially if you have nested children inside elements that shouldn't trigger drag.

[mzumberi]

i figured it out myself
i had to just give the ref i was putting into the parent component to the child component

[dbismut]

oh well I answered something in the meantime, but I missed the part where you didn't want the parent component to be able to drag itself. In that case it's better to attach events to the child component that you want to use as the handle.