Draggable for only the parent element.

[ShaniaKC]

Hello forum,

 

I was working with the Draggable plugin today and discovered that all the child elements of the target element also became draggable.
Is there a way to disable this?

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[ShaniaKC]

Thanks for the tip. 
 

I have created a minimal demo 

See the Pen GRxLpwZ by ShaniaKC (@ShaniaKC) on CodePen

 

The goal is to rotate the green div on drag, but as you will see, the red ( child ) divs also rotate on drag.
 

[Cassie]

Oh ok - yeah this is definitely by design. Otherwise you'll have to somehow reparent all the children when it moves.

Could you maybe create a span inside the parent that's has the background colour and then animate that instead?

[ShaniaKC]

Hello Cassie, 

Thanks for helping out. 

Let me try to explain better.

 

The red div inherits the on-drag event, kind of like event trickling. 

If you drag only the red div, it rotates while the parent ( green ) stays static. 

 

Is this also the intended behavior?

 

[GreenSock]

I'm having a difficult time understanding your goal here. Of course when you drag the parent, the children would come too - are you trying to counteract that? Like if you drag the green box, the red children appear to stay still even though they're children of the green parent? Or are you saying you want to be able to independently drag the children AND the parent (separately, but when dragging the green parent, the red children would come along too)? 

[GreenSock]

If you're trying to get the children to drag independently while also allowing the parent to be draggable, you could probably just interrupt the event propagation like this: 

See the Pen dymLOPz?editors=1010 by GreenSock (@GreenSock) on CodePen

[ShaniaKC]

28 minutes ago, GreenSock said:

If you're trying to get the children to drag independently while also allowing the parent to be draggable, you could probably just interrupt the event propagation like this: 

 

 

 

I am trying to achieve the opposite. To stop the child elements from dragging independently. 
I don't know if you noticed, but in the codepen I created they are dragging already and I don't want them to. at all

 

It seems like they are inheriting the on-drag event handler and this is what I would like to stop

 

Thanks for your help

 

[GreenSock]

11 minutes ago, ShaniaKC said:

I don't know if you noticed, but in the codepen I created they are dragging already and I don't want them to. at all

Absolutely nothing was draggable in your demo for me. I clicked and dragged on each element and nothing moved at all. 

 

12 minutes ago, ShaniaKC said:

It seems like they are inheriting the on-drag event handler and this is what I would like to stop

Are you saying you want to be able to drag the green container/parent and while that happens, the red children appear not to move at all? That's not how the DOM works (it's unrelated to GSAP). You'd literally have to counter-move and counter-rotate the child elements in the opposite direction to make them appear not to move with their parent. Or perhaps I'm still misunderstanding you.