[How to make dynamically created divs draggable]

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

[How to make dynamically created divs draggable]

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>

 

[Connecting to draggable elements with an unidirectional arrow/line]

17 hours ago, ZachSaucier said:

Hey kryptonite and welcome to the GreenSock forums.

 

GreenSock tweeted about how to make this sort of thing and some similar ideas:

 

Hey @ZachSaucier,thanks for the reply. I have gone through the post however they are a bit difficult to understand and also outdated as many of the functions have been deprecated since. Also my divs are created dynamically unlike the ones shown in the post so I am not sure how to implement this.

[Drawing Drag and drop connectors between SVG elements]

On 9/26/2017 at 3:39 AM, OSUblake said:

A pretty advanced demo of a node based editor. It uses a single Draggable instance to control everything. Based on a larger project I was working on. I need to add in a couple more features like deleting connectors and mouse wheel zoom. 

 

 

 

 

hey @OSUblake,this is great. This is exactly what I am trying to make. However, the code is very complex and difficult to understand, and a lot of the functions have been deprecated I think. Could you please update this with more comments and explanations and also include the delete feature if you have implemented it. I have making div dynamically that are draggable and I want to connect them. 

[Connecting to draggable elements with an unidirectional arrow/line]

I want to create draggable div that can be connected to each other by an arrow/line. And the arrow should expand/contract as the two div are moved. I can implement the draggable part but I cannot understand how to connect them. Please help. 

Example : https://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json

 Also I want to be able to remove the arrows when required. Similarly if I remove one the draggable divs, all the lines connected to it should be removed. Is this possible using GSAP plugins?