Jump to content
Search Community

Using Draggable with two landing areas and form

Rockhopper92 test
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 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!

Link to comment
Share on other sites

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.


  • Like 6
Link to comment
Share on other sites

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?




Never mind me being an idiot! I just removed...


bounds: window


Problem solved!

  • Like 2
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.
  • Create New...