Lock axis across different Draggable instances

[tauab]

Hey guys,

 

First off let me start out by saying how great this product is, really impressive and loads of fun to use.

 

I came across an interesting challenge today. I am trying to figure out how to temporarily disable the dragging or scrolling of one Draggable instance when a separate Draggable instance is being dragged or scrolled. If you're thinking, why on earth would you want to do that? I'll explain.

 

I have one div(the parent div) that is only responsible for vertical dragging/scrolling. Inside of that parent div I have child divs that act almost like film strips that require only horizontal dragging/scrolling. What I was hoping to achieve is similar to the "lock axis" feature currently available for the same Draggable instance. Otherwise it's very wonky to drag/scroll when multiple axis are moving around simultaneously.

 

I set up a simple code pen for anyone who is brave enough to humor my ridiculous request 

 

Any guidance would be most appreciated.

See the Pen einqz by anon (@anon) on CodePen

[Diaco]

Hi tauab

 

Check this out :

See the Pen qmGis by x0b (@x0b) on CodePen

 

[Carl]

Hey AncientWarrior,

 

Thanks for helping out. Much appreciated!

 

- Carl and everyone else who may have forgotten that CodePen demo exists;)

[tauab]

@AncientWarrior - wow, this is awesome. Very clever!

 

If I understand this correctly, the crux of what's happening is that the edge resistance value is being toggled via user mouse events like mouse down etc?

 

Could the same concept work for scrolling? Like using Jquery to listen to a scroll event and then toggle the edge resistance?

 

Thanks for the amazing codepen, and for the time!

[Diaco]

Hi

 

I'm glad it helped .

 

i saw the codepen in this discussion ; for more explanation pls check this out :

http://greensock.com/forums/topic/9470-draggable-on-mobile-how-to-manage-horizontal-draggable-and-native-vertical-scroll-webkit/?p=39023

 

anyway this's scrolling version of that with your codepen  :

See the Pen KCyGs by anon (@anon) on CodePen

 

...

[tauab]

Thanks again @AncientWarrior

 

These links are super helpful.

 

The final piece of the puzzle for me is to figure out how to achieve the same functionality for scrolling(trackpad on laptop or mouse wheel) like in the codepen you provided above.

 

For instance, if a user starts to scroll down the page vertically, the horizontal strips would lock. Conversely, if a user were to start scrolling one of the horizontal strips then the vertical scroll would lock. Just to clarify, when I say "scroll" I mean desktop scroll via either a mouse or trackpad.

 

Currently the dragging functionality is exactly what I need, however I can't get it to work for scrolling.