Here's some things to get You going regarding the drag issue:
A thread addressing the drag issue with objects not following accurately:
The documentation for Hype's Drag API here.
You will note there is a link to a thread at the bottom of this Drag API section:
Using the X and Y position events above allows you to create draggable elements constrained within a defined area. Example here.
This thread features one of this Forum's Most Valuable Resources: @h_classen
Here is Han's associated file that shows up in the thread further down - thought I'd save You the work ;->
dragMe.hype.zip (10.8 KB)
I know, I know - Han's coding!!! (But what would we do without him?)
@h_classen always creates beautiful work, but it's always too complicated for me to understand
However, if You sit with this code a bit (or a while), You will see that it can be followed (even I could do it!).
The main thing we are interested in is the "X" (horizontal) position of the drag:
So to adapt the code for horizontal constraint only (as per @h_classen in the same thread):
and ... you can easily adapt those lines for
contained horizontal drag
c = [100, 400];
p = element.parentNode;
pX = p.getBoundingClientRect().left;
gX = event['hypeGestureXPosition'];
eW = element.getBoundingClientRect().width;
c = c + eW;
nX = gX - pX - (eW/2);
if(nX > c && nX < c)
element.style.left = nX + 'px';