Irving D Posted December 23, 2020 Share Posted December 23, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted December 23, 2020 Share Posted December 23, 2020 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? 3 Link to comment Share on other sites More sharing options...
Irving D Posted December 24, 2020 Author Share Posted December 24, 2020 Yes thank you for your Christmas-present of an answer! Much appreciated! Works a treat. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now