Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable - Is it possible to get the id of the targeted cell

Go to solution Solved by Diaco,

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 read through the Draggable documentation but did not find an easy way to identify the target cell a draggable object has been dropped into.  Is there a simple method to accomplish this?  


In my example, when the draggable object is dropped, an alert returns the id of the draggable object. What I would like it to do is return the id of the cell the object was dropped into.






See the Pen PwvzbJ by anon (@anon) on CodePen

Link to comment
Share on other sites

i did NOT read the draggables docs...and your probably gonna hate me for this solution...but after reading through your script, and learning that the snap occurs from a division of size instead of a relation to a cell (if that makes sense) it seems you have to get the cell the hard way, and this is one of the easiest hard ways I know, of course I cheat severly to make it happen, maybe u can do better but this is my quick and dirty 3 minute band aid


See the Pen zxQKvo by anon (@anon) on CodePen


edit*** and, i guess considering the snap, its possible that the mouse and the snapped cell arent the same :/

Link to comment
Share on other sites

pellmellism, you are right, b/c of the snap (momentum) the ending x & y value of the mouse may not agree to the endX or endY.

Link to comment
Share on other sites

Diaco, I tried .hitTest() and could not get it to work.  When I saw 

var targets = $(".gridCell");

I realized were I went wrong to begin with.  Thanks for your help.

Link to comment
Share on other sites

For those of you interested, I published my final example at the codepen address below.  It demonstrates draggable items with dynamic target cells inside a grid. Invalid drops reset the drag.


See the Pen PwroPp by hackfin (@hackfin) on CodePen

  • Like 1
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.