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

[lake]

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. 

thanks!

[OSUblake]

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.

[lake]

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! 

[lake]

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

Thanks!

[lake]

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.

Thanks!

[OSUblake]

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.

 

[Jonathan]

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

[lake]

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.