Rockhopper92

OMG that is so much more efficient! Thank you!

Solved it! else if (this.hitTest(dropArea2,overlapThreshold)) { $(this.target).addClass("highlight"); } else if (this.hitTest(dropArea3,overlapThreshold)) { $(this.target).addClass("highlight"); } ...etc. was all that was needed.

I've edited one of the codepens provided by Greensock and I've pretty much got what I need (minus the formatting don't judge me!) I'm having trouble though with using multiple dropAreas, I've set up the 15 divs I need as drop areas but can't get the JS to run through them all. I tried copying what was already there and applying the next div variable to it but then it only works for the last one. Probably not explaining this well but you'll see in the javascript I've got dropArea1 which works fine, then dropArea2 later on overrides this so dropArea1 no longer works but dropArea2 does.

Thanks Carl this looks spot on! Out of interest when I run that Codepen the boxes are all on top of each other rather than in a column. Is this is a bug somewhere or just my browser being weird? EDIT: Never mind me being an idiot! I just removed... bounds: window Problem solved!

I was just wondering, as I'm completely new to GSAP ad Draggable. Is it possible to have a number of boxes in a vertical column and then have these so they either land in area 1 or area 2. This is for a sports management site and effectively the column is all registered players, area 1 are those in the starting line up and area 2 are the substitutions. My plan is to then loop through what is in area 1 to use a PHP cURL script to send SMS and Emails notifications to these players so I'd use a form that captures the data in area 1 and sends as a POST value to my . php file and then again for area 2 but with a different destination. I hope that makes sense and sorry if it's a bit vague but am a bit cautious of spending hours working through it if it turns out it's not possible!