Draggable disappears when parent container is transformed

[Irving D]

I'd like to be able to drag between SwiperJS containers - e.g drag an object from one slide and drop it in another (see codepen).

The issue is that the draggable object disappears because swiperjs transforms the parent slide mid-drag. I'd like for the draggable to stick to the pointer mid-drag until it is released, at which point if it is over the destination container - reparent.

 

Thoughts I've had:

I've tried calling 'update()' with the 'sticky' parameter set (after setting updated gsap.set on x and y properties reflecting the transform). 

possibly re-parent during drag...? 

 

Any thoughts ideas and code on how to deal with this issue would be much appreciated.

 

Irving

See the Pen dypVRYp by irvingd (@irvingd) on CodePen

[GreenSock]

If SwiperJS is constantly changing the transforms of the parent during that time, you'd need to keep telling the Draggable to update() (sticky) on each tick too. One idea would be to just use a dummy tween that isn't actually animating anything but you tap into its onUpdate functionality to have the Draggable update on every tick during the transition, like this: 

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

 

Does that help? 

[Irving D]

Yes thank you for your Christmas-present of an answer! Much appreciated! Works a treat.