Jump to content
GreenSock

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

Release Draggable div into another parent mess with animation

Recommended Posts

Hi,

 

I have options with gray border and selected with gray background: 

<div class="options">
 	<div class="item">Criancas</div>
 	<div class="item">Bebes</div>
 	<div class="item">Brinquedos</div>
</div>
<div class="selected">
</div>

 

On javascript part all of items are Draggable. And have the function onRelease that checks if the item "hit" the "selected" div.

 

All works fine, but the final animation. When I Drag the item is ok, but when i release it, the animation to go "back" to the x:0 and y:0 of the new parent starts from the another side of screen.

 

rv_animation.gif.bfc08854dde1db69c8f7f3f2eedd64d5.gif

 

When the item change parent they get new x and y and the release animation starts from that new coordinates.

 

How can i make the release animation starts from the actual coordinates relative to the new parent and avoid this bump?

 

Thks

 

 

Link to comment
Share on other sites

Hi @Snape,

 

Welcome to the forums.

 

It's pretty tough to troubleshoot with just a few pasted lines of code and a screengrab. Do you think you could put that into a demo for us? More info:

That'll give you the best chance of someone being able to help you. Thanks and happy tweening.

 

  • Like 1
Link to comment
Share on other sites

I created the pen:

 

See the Pen bJQNVr by rodrigosnape (@rodrigosnape) on CodePen

 

I tryed to insert the update(), but i guess i dont know where

 

Thanks

Link to comment
Share on other sites

It's probably easiest to just use getBoundingClientRect() to just figure out the change and adjust for it, like this: 

See the Pen Pgxqjy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that the result you wanted? 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, GreenSock said:

It's probably easiest to just use getBoundingClientRect() to just figure out the change and adjust for it, like this: 

 

 

 

Is that the result you wanted? 

 

That is it!!! On the spot!

 

Thanks for your patience and your time!

 

 

  • 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.
×