Draggable - Using it with a horizontally scrollable list + negative hitTest values

[catepillar]

Lo GreenSock community,

 

Just joined Club GreenSock today after realizing that ThrowProps is really, really cool. Few questions for you all - any help is appreciated.

 

• Question #1: Is it possible to get "overflow-x: scroll" working with Draggable objects?
• Question #2: Is there a way to use a negative overlap (-100) with hitTest? I'd like a radius of around 100px around the center box to pass the hitTest.
• Question #3: If the hitTest is successful, how can I make sure the Draggable image goes to the very center of the center box, rather than just staying where it is? I started playing around with Tweening to the center box's coordinates, but it seems like the x/y coordinates for draggable objects are based on their initial position, not their container.

Here's the Codepen again: 

 

Thanks,

Jordan

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

[Carl]

Hi and welcome to the GreenSock forums and the club!

 

Thanks for the demo and questions.

There are a few hurdles with what you want to achieve

 

Question #1: Is it possible to get "overflow-x: scroll" working with Draggable objects?

 

I'm not entirely sure I understand what you need to do, but if you want to drag the items and force their container to scroll as they reach the edge, the autoScroll feature will handle that. Please see demo here: http://codepen.io/GreenSock/pen/YPvdYv

 

Question #2: Is there a way to use a negative overlap (-100) with hitTest? I'd like a radius of around 100px around the center box to pass the hitTest.

 

Sorry, that isn't supported currently. I imagine you could put a smaller element with opacity:0 on top of the center image and hitTest() against it.

 

Question #3: If the hitTest is successful, how can I make sure the Draggable image goes to the very center of the center box, rather than just staying where it is? I started playing around with Tweening to the center box's coordinates, but it seems like the x/y coordinates for draggable objects are based on their initial position, not their container.

 

The big issue here is that the elements you are dragging are inside of ".bar-footer", which has a totally different coordinate space than the image in the center.

Our moderators Blake and Rodrigo both came up with some techniques to get around this issue by creating clones of the elements you drag. 

 

 

Blake

http://codepen.io/osublake/pen/XJQKVX

 

Rodrigo

http://codepen.io/rhernando/pen/LEyLxp

[catepillar]

Thanks Carl, those Codepens are exactly what I needed as a basis for my project. 

 

I've got a few more questions, but I'll need to play around with the Codepens provided for a few days before I'm in a position to get some help from the forum.

 

Gracias!