Parent/Child Draggable Question.

[paulmak]

Hello,

 ​          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!
 

[Jonathan]

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

[Diaco]

Hi paulmak 

 

pls try this :

Draggable.create( parent , {
    type:'x,y' 
});

Draggable.create( child , {
    type:'x',
    onPress: function(e){ e.stopPropagation() }
});

[paulmak]

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.