Using Draggable with two landing areas and form

[Rockhopper92]

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!

[Carl]

Hi and welcome to the GreenSock forums,

 

It sounds like you just want to be able to detect when something that is dragged gets dropped in a certain area.

Here is a demo that illustrates those features of Draggable

 

See the Pen Pqwxvw by GreenSock (@GreenSock) on CodePen

 

You will see that when you leave a box in the Drop Area that it changes a style (gets a yellow border) at that point you can do whatever you need to: put the element in an array, send a text message, update some value in a form.

 

[Rockhopper92]

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!