[Help with a swap using draggable]

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.

[Help with a swap using draggable]

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 !

[Help with a swap using draggable]

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

[Help with a swap using draggable]

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