Jump to content


Draggable- element position is sometimes different from pointer\finger position

Go to solution Solved by lake,

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

Sometimes when I drag the draggable item really fast across the screen. The position of the element becomes misaligned and is no longer aligned with the position of the pointer where my finger is. I'm not sure where to begin. I'm hoping someone has come across this issue at some point? I was not able to find anything in the forum. 

I'm trying to use it in an Angular directive within an ionic framework\Cordova app I'm not doing anything fancy— I'm doing the following:

  1.  on drag: Checking for hit test to determine where I'm hovering
  2.  on drop: I'm Setting the bounds to elements the user can drop on
  3.  If user tries to drop on on-droppable elements, tween back to the original position

Everything works perfectly except for the occasional spurt where the element position does not line-up with the pointer\finger\user's drag position.  

Any help is appreciated. 


Link to comment
Share on other sites

Please make a CodePen so we can see the problem.


When you are quickly moving it across the screen, you might be triggering it to go back to the original position and you are catching it, causing the dragging to continue. This could explain the offset. Check if your drop function is being called while you are dragging.

Link to comment
Share on other sites

Thanks for the quick response! I'm trying to put together a CodePen that reproduces my problem. I wanted to post this out there hoping there is some common silly mistake I'm making. As you suggested, I checked for the 'drop' function and it is not being triggered anytime during the drag.  I will add a CodePen link soon.

Thanks again! 
  • Like 1
Link to comment
Share on other sites

Ok. I was not able to reproduce the issue in codpen. Granted it is a simple, bare-bones sample... I will add-on other features from my project and see if the problem creeps up. Sharing the link for anyone looking at GSAP+ Ionic/Angular.

See the Pen OVeaMw by leyk (@leyk) on CodePen


Link to comment
Share on other sites

Oops! I spoke too soon. If you look at the codepn you will see the problem.

See the Pen OVeaMw by leyk (@leyk) on CodePen

Try dragging the black square left to right across the bottom set of drop areas.

You will see the drop zone area labeled "black" will be shaded green indicating the hit test returned "true". It returns true even before the overlap occurs, which incorrect. I log the Draggable.x,y and pointerX,Y and there is about a 100px difference. 


Here is what I see in the console log:

draggable.x and draggable.y: 760 266 draggable.pinterX,draggable.pinterY: 654 337.


What I sometimes see in my app (on the device\browser) is the draggable item accelerating across the screen faster than the user intended. It appears as if  draggable item trying to sync with the pointer position.    


I appreciate your help.


Link to comment
Share on other sites

I don't know if I'm see what you're seeing, but you're hit testing the shadow which makes it fire before it's over the element.


It's not unusual to have a pointer device outpace something when you moving it around really fast. Try dragging anything on your computer really fast. It's usually lagging behind. I'm not seeing anything on my touch screens.


I didn't see in your code if you were using the draggables x/y properties for anything, but I've had problems in the past with that being a little out of sync. I usually use the transform object on an element as a more reliable way to get it's position. So I tend to use this - element._gsTransform.x over of draggable.x


Another thing that might be the cause of your problem is Cordova. I've used it in the past and it performed really poorly. I don't know if things have changed since I last used it, but I remember apps getting rejected by Apple for being too slow.


  • Like 2
Link to comment
Share on other sites

just to chime in..

  • what mobile OS is this behavior on.. Android Apple IOS ?
  • also what mobile browser and browser version?


just trying to make sure this issue is not specific to a specific OS and Browser/Browser version :)

Link to comment
Share on other sites

  • Solution

I got it. Yes it turns out the pointer is out of sync because I was hit testing the wrapper div element attached to the directive. I was able to fix that by hit testing the inner div the image is attached to instead. 



The behavior with the drag item accelerating across the screen only happens in my app (not in the codepen) in iOS/android and desktop Chrome/Safari..  I will have to do some digging there. Thank you for the tip about using the transform object's X,Y. 

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.