Jump to content


Using array to store draggables

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've got a set of panels that are draggable, but at times I want to be able to disable / enable them... I'm sure this is the correct way to do so, but getting an undefined error... 




 for (n=1; n<=totalPanels; n++){
dragArray[n] = Draggable.create("#slide"+n, {cursor:"pointer", type:"left,top", throwProps:true, onDrag:function(){  peopleParallax(); }, onClick:function(){     slideClick(currentRollover);    }, dragClickables:true,  edgeResistance:0.9, bounds:'#siteContainer'});
Can I not use dragArray[n] = and then the draggable code? and then use
Link to comment
Share on other sites

Draggable.create(...) returns an array of draggable instances (one per element). You'll need to use


dragArray[n] = Draggable.create(...)[0];
  • Like 2
Link to comment
Share on other sites

Thanks Jamie, I'll try that! Seems I must of been trying to ref a whole array then.

Link to comment
Share on other sites

Perfect... that worked... thanks Jamie!

  • Like 2
Link to comment
Share on other sites

Just an additional thought...


It looks like you are using the loop strictly to generate unique IDs for each Draggable item: "#slide"+n


You can get rid of the loop if you find another way to select the elements perhaps give them all the same class


<div id="slides">

   <div id="slide1" class="draggable">

   <div id="slide2" class="draggable">

   <div id="slide3" class="draggable">



Then you can just do

dragArray = Draggable.create(".draggable", {yourVars}) 

or select each div that is a direct child of the #slides div

dragArray = Draggable.create("#slides > div", {yourVars})

without a loop as those selectors would grab all of your slides and create Draggables for each one.  Again, just an idea. In order to use more advanced selectors like the ones used above, you would need jQuery or another selector engine loaded.

Link to comment
Share on other sites

Thanks Carl,


I need to sometimes disable 4 out of 7 panels... so it's very easy to look up an attribute of the divs and decide to then disable or enable them

  • Like 1
Link to comment
Share on other sites

Cool, just to be clear I'm not saying to ditch the IDs, just that you don't need to loop through them to create an Array.


Also, another tip, you don't need to go back into your array to find the Draggables (although that is perfectly fine), you can use Draggable.get().


just giving some options, again your way is perfectly fine.


Happy Dragging! ;)



  • Like 5
Link to comment
Share on other sites

Thanks for this, that last post by Carl has been very useful.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.