Bound draggable at top only

[wind_kind 0 Likes (Newbie)]

I've tried a couple of things now but I need help with this please.

 

I have a draggable block that I want to restrict from going past the top of the screen but should be able to drag past the bottom fully. If you view the pen I did, you will see an arrow/tab at the bottom. Ideally this tab will be halfway visible at the bottom and when the block is dragged all the way up the bottom half should be visible plus 5px of the grey background.

 

So when dragging the red block to the top it should stop 5px before so I don't see the grey peeking out at the bottom. So far I can drag it all the way and then I did some checks to just get the red block in place but I have to get those bounds right.

 

Like I said, I tried using hitTest and some of my own logic and checking the element Y position etc but my knowledge with this is limited.

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

[Carl 9,066 Likes (Superhero)]

I think the translations you were doing in css were impacting the calculations of the bounds.

 

See if this works for you:

 

http://codepen.io/GreenSock/pen/EKKLBR?editors=0010

[wind_kind 0 Likes (Newbie)]

I think the translations you were doing in css were impacting the calculations of the bounds.

 

See if this works for you:

 

See the Pen EKKLBR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Brilliant. Thanks.