Kholja Posted May 16, 2021 Share Posted May 16, 2021 I'm experimenting with ScrollTrigger horizontal scroll and additional draggables. In this example I used a horizontal fake scroll with a proxy draggable element to simulate swiping on touch-devices. Then I added some draggable boxes. If I drag a box, this works even if the boxes lying over each other. But the dragging of a box does drag the horizontal scroll proxy. Why is this happening and how could you prevent that? See the Pen jOBrYyP by kholja (@kholja) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted May 16, 2021 Solution Share Posted May 16, 2021 Hey @Kholja I am not too versed with Draggable myself yet, but my quick guess would be that since your .draggables are inside that container that you use as a trigger for your proxy-draggable, that proxy-draggable's dragging will simply just be triggered too, when dragging your .draggables. As a workaroud for that you could add onPress: function() { Draggable.get(proxy).disable() }, onRelease: function() { Draggable.get(proxy).enable() }, to your .draggable draggables. Seems to work quite well - But since I'm not the most versed yet as already mentioned I'm not sure if there is a better way for that. See the Pen 5a8a2a1f26a78b325c95c23c6dbf2c49 by akapowl (@akapowl) on CodePen Edit: From what I got from a quick google search and this older thread - respectively the first codepen demo linked in @Carl's answer - it looks like you could also just add onPress: function(e) { e.stopPropagation(); } to your .draggable draggables. See the Pen 1f52cca8cd8d8a1c044eca553a3247ac by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Kholja Posted May 17, 2021 Author Share Posted May 17, 2021 Hey @akapowl thank you for your help. Works like a charm . I used the second solution for the example. I was thinking in this direction but maybe used the wrong search terms. But also thanks for the first example. I assume this would be a great way to implement interaction with other draggables too. Link to comment Share on other sites More sharing options...
akapowl Posted May 17, 2021 Share Posted May 17, 2021 To add up on this: I just tested this on my mobile device ( Android 11 - Samsung Internet Browser ) and found, that the first solution (disabling and re-enabling the proxy draggable) worked 10/10 but the suggestion with e.stopPropgation() did not work at all. My guess would be that since on mobile there are different events ( touchstart, touchmove, touchend ) it might be related to the relevant event already having been dispatched when the e.stopPropagation is called onPress of the draggable, so the stopPropagation wouldn't have any effect. So I added another e.stopPropagation on the touchstart event for the draggable element inside the forEach loop and now it seems to work on mobile, too. See the Pen fce3c8992f26f9b15d20097985792a64 by akapowl (@akapowl) on CodePen Edit: Alright, I took another look and found the following thread. This here is a fork of the demo by @Rodrigo using TweenMax 1.18.4 where the e.stopPropagtion in the onPress of the draggable still works for me on mobile. See the Pen b1292b27e976e67bcbd8dd9dde9fc08d by akapowl (@akapowl) on CodePen And this here is the same demo using the current version(s), with the e.stopPropagtion in the onPress of the draggable not working for me on mobile anymore. See the Pen a61acb6004f81a4faadd056b4a4a044f by akapowl (@akapowl) on CodePen Maybe @GreenSock or @OSUblake could have a look at this? 4 Link to comment Share on other sites More sharing options...
Cassie Posted May 17, 2021 Share Posted May 17, 2021 This is really nice @akapowl 🙌 1 Link to comment Share on other sites More sharing options...
Kholja Posted May 17, 2021 Author Share Posted May 17, 2021 Great work @akapowl appreciated very much👏 1 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