Jump to content
Search Community

[SOLVED] How to fix drifting of element during drag when element changes position

rkk test
Moderator Tag

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 basically modified this example "https://greensock.com/?example=sortable-grid-using-draggable" but I separated it into multiple isolated sections which can contain tiles (Each section has a bunch of tiles which can be reordered, but is independent of the other sections).  It is though possible to move a tile from one section to an other. I'm checking in the "Out of bounds" part if the tile is touching an other section, and if yes, I attach it to that section. Everything is working so far, but there seems to be an issue with the relativo position of Draggable.  


From what I've seen Draggable uses relative translateX and translateY CSS styles to move arround the elements, but when I move my element to an other section, the div element is attached to the new section, and the tile still has the old translateX value, and therefore drifts away from the cursor as the element is positioned in some other place.


Is there any way to reset the dragged element position to be relative to the new position in the DOM, and stay under the cursor?


Greetings and thanks.


Link to comment
Share on other sites

  • 4 weeks later...

Hi, here is an example. Its very simplyfied but reproduces the same behaviour. Just drag the yellow box to one of the blue or red containers. When the box is attached to another container, the yellow element starts driffting as Draggable still calculates the position from its old position. Is there any way to recalculate the relative position?


See the Pen vJgqZw by rkkoszewski (@rkkoszewski) on CodePen


Link to comment
Share on other sites

Thanks for the demo. This is definitely a bit of a challenge that is going to take a fair amount of custom code on your end to make work properly. Re-parenting Draggables as they are being dragged isn't supported directly by the API. 


Right now there is a decent issue with the logic you are using as the hitTest always comes back true since the yellow box already lives in the blue droppable. You are probably going to have to find away to rewrite your hitTest() so that it ignores the box's current parent and only hitTests against the other ones. Once you detect a hit on another droppable you will need to convert the coordinates and perhaps call update() on the Draggable instance.


I haven't worked out any of the calculations but it may also be of importance to know if you are dragging up to a new droppable or down to the new droppable. 


Again, this usage is pretty far beyond what Draggable is meant to do so its not something we can spend a lot of time trying to figure out. Some other folks may have some suggestions though.




  • Like 1
Link to comment
Share on other sites

Actually, I think there may be a good solution built into the update() method - there's a "sticky" parameter that'll adjust the x/y values such that they seem to "stick" to the pointer which is exactly what you need if you're reparenting the element (naturally causing a positional shift). Here's a demo: 

See the Pen 48a467c92ddc80d4fa24301da31f9153 by GreenSock (@GreenSock) on CodePen


Is that what you were looking for? 

  • Like 2
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.
  • Create New...