Draggable collision detection or exclusive bounds

[cory 0 Likes (Newbie)]

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.  

[Rodrigo 2,662 Likes (Superhero)]

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:

 

http://www.greensock.com/draggable/

 

Rodrigo.

[cory 0 Likes (Newbie)]

Okay after some sips of yerba mate, I have this plunkr up:

 

http://plnkr.co/edit/RAuHijIRFeP391V72yk8?p=preview

 

I will have a go at making the grid an array on Monday.  Thank you very much for your input and recommendations!

[cory 0 Likes (Newbie)]

So I got collision detection to work.  My x and y functions (app.js line 100) seem a little heavy.  Do you see a better implementation?  I take critque well so if I am absolutely insane please let me know. 

 

http://embed.plnkr.co/RAuHijIRFeP391V72yk8/preview

[Rodrigo 2,662 Likes (Superhero)]

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:

 

http://mypuzzle.org/sliding

 

Rodrigo.

[cory 0 Likes (Newbie)]

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.