Jump to content
Search Community

Horizontal scroll with draggable proxy + draggable box not working independently

Kholja test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

 

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

  • Like 2
Link to comment
Share on other sites

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

 

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?

 

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...