Drag element limited by 'container' without additional js-library

Using JavaScript with Hype Function Library
9

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[1] = c[1] + eW;
nX = gX - pX - (eW/2);

if(nX > c[0] && nX < c[1])
{
element.style.left = nX + 'px';
}

contained vertical drag

c = [100, 200];//y1, y2
p = element.parentNode;
pY = p.getBoundingClientRect().top;
gY = event['hypeGestureYPosition'];
eH = element.getBoundingClientRect().height;
c[1] = c[1] + eH;

nY = gY - pY - (eH/2);
if(nY > c[0] && nY < c[1])
{
element.style.top = nY + 'px';
}

Nice day :slight_smile:

2 Likes