Draggable area with draggable children issue

[7linternational 0 Likes (Newbie)]

Hello, I was trying to have a background area being draggable (like a large canvas) and on top of it have draggable children. But when I drag the child the area gets dragged as well. Any ideas how to separate them? Should I check if the mouse is hovering over the child boundaries and disable the area drag or is there another way?

 

https://codesandbox.io/s/gsap-3-draggable-plugin-forked-pwibg0?file=/src/Area.js:702-953

[GreenSock 18,873 Likes (Superhero)]

I don't have time to look at your demo right now, but when you click on an element's children, that's automatically interpreted by the browser as clicking on that element. So you shouldn't apply your Draggable to the parent - you should instead create an element that's just the background, sitting behind the other clickable elements. You could actually apply the Draggable to the parent but use the separate background element as the "trigger" for the Draggable - that's probably the best approach. Does that help? 

[7linternational 0 Likes (Newbie)]

Thanks I'll try it out, I want the draggable background to also move its containing children (think of how figma or miro, drag the background to move everything, but each thing is also movable), so the trigger might do the trick.

[Rodrigo 5,879 Likes (Superhero)]

Hi,

 

Maybe you are looking for something like this:

https://codesandbox.io/s/gsap-nested-draggable-in-react-gkh27o

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!