Reinitialize trigger for draggable element

[tcarpenter9]

I have multiple elements that are being used as the trigger under one class. For example, the "dragHandle" class is my trigger:

 

<div class="dragHandle"></div>

<div class="dragHandle"></div>

<div class="dragHandle"></div>

 

<div id="draggableLayer"></div>

 

This is fine when it is first initialized. All three will drag the "draggableLayer." The problem is, I am dynamically adding more "dragHandle" elements, and they are not seen as triggers after Draggable has initialized on page load. I.e:

 

<div class="dragHandle"></div>

<div class="dragHandle"></div>

<div class="dragHandle"></div>

 

<!--  these 2 were added after page load, but don't work like the others do as a trigger -->

<div class="dragHandle"></div>

<div class="dragHandle"></div>

 

<div id="draggableLayer"></div>

 

I have tried disabling (and killing) and then enabling the Draggable after adding the the additional trigger elements, but that hasn't worked. Is there a way to destroy and reinitialize the Draggable? Or maybe another way to make it see the additional trigger elements I am dynamically adding?

 

Thanks!

[Carl]

Hi and welcome to the GreenSock forums,

 

Draggable only finds the trigger elements upon creation. It doesn't ever re-search the DOM for items with matching selectors.

 

I'm pretty sure the only way to achieve what you want is to kill() the Draggable and create a new one.

 

 

If you need more help in doing that, please provide a simple CodePen demo that makes it easy to add new trigger elements to the DOM. 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[Carl]

come to think of it, this should work: http://codepen.io/GreenSock/pen/d0151ca3dd9709b90f2bd6f653ead0ec/

[tcarpenter9]

This is perfect, thank you!