Jump to content
Search Community

Help with a swap using draggable

mcnally486 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 have been trying to use draggable to create a swap effect using various tutorials and examples found here. If you take a look at the codepen, the ondrop function basically needs to complete the swap:

 

 1. The dragged element should move to the position pf the dropped element 
 2. The dropped element should move to the dragged elements starting position
 
 
I have tried a few things but i fear i am going about it the wrong way 

 

Id appreciate it if someone could point me in the right direction

 

Thanks

See the Pen aNMVwQ by chrismcnally (@chrismcnally) on CodePen

Link to comment
Share on other sites

Blake created an excellent demo that's similar to your execution

See the Pen RNLdpz by osublake (@osublake) on CodePen

 

Thanks for the response. I have seen that demo, unfortunately it doesn't always swap elements, it just shuffles all the other elements around and slots the dragged element into a space.

 

I need this to perform direct swaps between two elements and no other should be moved

Link to comment
Share on other sites

yes, but Blake's demos are incredibly concise and easy to read. I would think his hitTest validation should be enough to get you started down the right road.

it might be tough to find the perfect answer unless someone already built that exact method.

 

If you check Blakes CodePen profile he's done some other demos with hitTest code via GSAP Draggable.

  • Like 1
Link to comment
Share on other sites

Thanks, I have looked through them . The drop test part is working fine , my issue is animating the swap between two elements 

 

When i drag an element onto another element, the dragged element should move into the place where the element is dropped (I have this working)

 

Then the dropped element should move (animated) back to the dragged elements original position. I just need some help with the logic of this, i've tried various methods

 

Edit, I have solved it by swapping the elements inside a wrapper using java script, then tweening the dragged wrapper (with the new element inside) back to its starting location

 

Doesn't seem like the best solution, but its a solution !

Link to comment
Share on other sites

Is this closer to what you need?

 

See the Pen ONGprv by GreenSock (@GreenSock) on CodePen

 

For future reference: don't make a post as solved if you still need help. It's easy for us to overlook posts that appear as "answered". 

Thanks Carl,

 

This solution works perfectly, but unfortunately not in my case.

 

When that codepen starts every tweens original x/y values are at exactly the same place (all values are relative to the same starting point)

 

On mine the blocks are in different containers. Take a look at my updated pen with that code. this.startX and this.startY is always zero.

 

Do you think the only way to achieve this is to start all elements in the same container with pos absolute and then move them to where they need to be initially ?

 

Or it there any way of calculating the correct xy values to move a block to another elements starting position ?

 

Edit : all working now

 

The fix was to get the coordinates of the dragged element using getBoundingClientRect in the ondrag function

 

Then subtracting the coordinates of the dropped element (also using getBoundingClientRect) in the onDragEnd function - this gives the correct distance to move the element.

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