Share Posted May 12, 2016 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 post Share on other sites
Share Posted May 12, 2016 Blake created an excellent demo that's similar to your execution See the Pen RNLdpz by osublake (@osublake) on CodePen Link to post Share on other sites
Author Share Posted May 12, 2016 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 post Share on other sites
Share Posted May 12, 2016 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. 1 Link to post Share on other sites
Author Share Posted May 13, 2016 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 post Share on other sites
Share Posted May 13, 2016 Is this closer to what you need? http://codepen.io/GreenSock/pen/ONGprv/ 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". 5 Link to post Share on other sites
Author Share Posted May 15, 2016 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 post Share on other sites
