How to make dynamically created divs draggable

[kryptonite]

i have a button and on clicking it a new div is created. All the divs have unique ids and I want to make all of them draggable. Basically everytime I click a button, an unique id is push to an array and then those ids are used to create div. Now I want all of them to be draggable and have triggers. I am new to gsap and I am not quite sure how to do this. I am AngularJS for creating the divs. 

 

 <div ng-repeat="node in nodes track by $index">

         <div class="node">

                <div ng-include="'components/nodes/'+node.type+'.html'" ng-if="node"></div>

         </div>

  </div>

 

[kryptonite]

I think I might have to use Draggable contructor instead of create but I am not sure how.

[PointC]

It looks like you've asked about this project in a few different threads. You'll get the best possible answers if you provide a demo showing your work so far. We're always happy to help with GSAP related problems and questions. More info about making a demo.

 

 

I'd say start with just trying to create some draggables in a loop or with a click event handler and then work your way up to the connecting lines. Make sense?

 

Happy tweening.

[GreenSock]

9 hours ago, kryptonite said:

I think I might have to use Draggable contructor instead of create but I am not sure how.

Just so you know, the only real difference between the constructor (new Draggable(...)) and Draggable.create() is that Draggable.create() can accommodate MULTIPLE elements whereas the constructor can only accept ONE. That's why Draggable.create() returns an Array - one for each element. So if you've got 100 elements with the class ".box", you can do Draggable.create(".box") and they will all become draggable whereas if you use the constructor, you'd have to loop through them all and call new Draggable(...) for each one. 

 

If you're still having trouble, feel free to post a minimal demo and we can take a peek, like @PointC said. ?