Jump to content
Search Community

Draggable collision detection or exclusive bounds

cory 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

Hello, I am very new to your api/code but definitely love it!  Conceptually what is the best create a draggable div that snaps to a grid and can detect when it shares a cell with another div.


Should I write validation a function in  onThrowComplete (using the ThrowPropsPlugin)?


Just looking for a little guidance.  

Link to comment
Share on other sites

Hi Cory and welcome to the Greensock forums.


Yep you could do something like that using the snap function to check each element's end value and pass it to an array, then check if that value is in the array in order to continue the motion to the next snap point or not.


Jamie, one of the GSAP superstars, came up with a pretty solid example of calculating the end value according to an array of snap values, you could fork it and take it as a base code for your idea:


See the Pen FnKba by jamiejefferson (@jamiejefferson) on CodePen


Mix it with this codepen from the Greensock collection in order to get the grid values:





  • Like 2
Link to comment
Share on other sites

Hi Cory,


Great job!! it looks very good.


I'm not familiar with angular (I've been dying to get my fingers into it for a couple of months but I hadn't have time yet), so I can't follow your code completely, but you've managed to create the conditional logic to prevent two elements reside in the same box. It reminded me of those puzzle games, where you have to arrange the numbers or the images with just one empty box:





Link to comment
Share on other sites

Thanks!  Yeah I remember those plastic puzzles (sometimes I would cheat and just pop out all the tiles, lol).  I have a couple of edge cases to wrap up but I think it will work for my needs.


Angular is definitely worth looking into if you have the time -- even if you don't have the time.  It is a great framework.

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...