Jump to content
Search Community

Parent/Child Draggable Question.

paulmak test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


 ​          How would one disable an initial parent from dragging while dragging a child, if both are draggable. Upon dragging this specific child, it detaches from the parent in order to be ready for a new parent later ( during onDragStart), but both the old/initial parent and "child" are registered as actively dragging simultaneously. Is there a gsap variable for this?

Outside of this plugin(draggable) I would approach a similar issue by using a mouse event and seeing which element is on the top layer and allowing only that layer to do whatever changes.

​I could disable the parent during the onPress event of the child if its parent is draggable, and then upon the onRelease of a child I could loop through all possible parents(might not have same parent anymore)  and enable them (thus finding the one disabled). I don't think this is the proper solution though...


Thanks in advance for any help!

Link to comment
Share on other sites

Hello paulmak, and Welcome to the GreenSock Forum!~


Do you have to Draggable instances setup for each element?


Here is a link to the GSAP Draggable Docs:


Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar", for example.

  • trigger : Element | String | Object - if you want only a certain area to trigger the dragging (like the top bar of a window) instead of the entire element, you can define a child element as the trigger, liketrigger:yourElement or trigger:"#topBar" or trigger:$("#yourID"). You may define the trigger as an element or a selector string (which gets fed to whatever TweenLite.selector is), or a jQuery object.

If you can please provide a limited codepen demo we can better help you by seeing your code in a live environment



Thanks :)

  • Like 1
Link to comment
Share on other sites

Thank you for your suggestions, I've tried both but with no success. After playing around some more, I've simply implimented a global array[x,y] that onPress() would store the caller(x) and parent(y) and disable the parent[y], then onRelease() would cycle through the array[x][y] to match the caller with the [x] and enable the parent[y], afterwards slicing the array.
Made a codepen demonstrating this issue and my solution...

See the Pen wGBNMx by anon (@anon) on CodePen

  (drag the child red box out of the parent blue box)

​Please do let me know if a better solution exists.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...