Collection of draggable, trigger on child

[JesusTheHun]

I'm using Draggable.create(arrayOfElements, {...}) to make a set of SVG g elements draggable.

The trigger of each element is a child of said element. One trigger is supposed to drag one element.

 

So I tried { trigger: ".draggable" }. When I do that, any .draggable trigger the drag of all elements (from arrayOfElements) instead of its parent only.
I could of course create the drag on the children directly, but then I have to move everything else manually.

 

Should I do an instance of Draggable for each element instead of for the entire array ? Does that bring any performance issue ?

[Cassie]

Hi @JesusTheHun,
 

Welcome to the forums! ✨

For future reference it's hugely helpful to put together a minimal demo so we can see the code you've written and advise on better solutions.

Are you trying to do something like this?

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

[JesusTheHun]

Yes something like this.

I didn't want to loop because I was concerned about performance, thinking one draggable is better than many. I may have a few hundred elements.

[Cassie]

No, that won't make any difference. Don't worry!

[GreenSock]

6 hours ago, JesusTheHun said:

I didn't want to loop because I was concerned about performance, thinking one draggable is better than many.

Well it creates a new Draggable instance for every element in your arrayOfElements anyway - there's no way around that because all of those elements we have to be tracked separately  Draggable.create() would do an internal loop. So you're not getting any performance gain by avoiding the external loop.