lake

Never mind. I figured it out... My wrapper element did not have the css 'position' property set. that needs to be set for z-index to work.

My draggable items are always being "layered" in the order which they are created in the DOM. This make sense. However, I cant seem to be able control the layering by setting the z-index or setting the zIndexBoost property to true. The codepen demonstrates my problem. I appreciate any help. -Thanks!

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.

Oops! I spoke too soon. If you look at the codepn you will see the problem. http://codepen.io/leyk/full/OVeaMw/ 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!

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. http://codepen.io/leyk/full/OVeaMw/ Thanks!

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!

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: on drag: Checking for hit test to determine where I'm hovering on drop: I'm Setting the bounds to elements the user can drop on 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!