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

drag

(Hans-Gerd Claßen) #1

Hi,

adding this js as executed script on ondrag-event of an element should remain its position within the given bounds.

c = [50, 550, 50, 400];//contained by box [x1, x2, y1, y2]


p = element.parentNode;
pX = p.getBoundingClientRect().left;
pY = p.getBoundingClientRect().top;
gX = event['hypeGestureXPosition'];
gY = event['hypeGestureYPosition'];

eW = element.getBoundingClientRect().width;
eH = element.getBoundingClientRect().height;


nX = gX - pX - (eW/2);
nY = gY - pY - (eH/2);
    
if(nX > c[0] && nX < c[1] && nY > c[2] && nY < c[3])
{
element.style.left = nX + 'px';
element.style.top = nY + 'px';
}else if(nX > c[0] && nX < c[1] && (nY <= c[2] || nY >= c[3]))
{
    element.style.left = nX + 'px';
}else if((nX <= c[0] || nX >= c[1]) && nY > c[2] && nY < c[3])
{
        element.style.top = nY + 'px';
}

Nice day :smile:


Drag and Drop for simple Quiz
How to: make this flower stay within the window?
Drag an full-screen image within the screen
Function Library Index
Creating volume slider for Hype audio element
Responsive reveal of picture
(Thomas Lundin) #2

Interesting!
Do you have an example?


(strmiska) #3

I have to agree - is there an example for better understanding?


(Hans-Gerd Claßen) #4

sure, sry
dragMe.hype.zip (10.8 KB)


(strmiska) #5

cool! thank you very much.


(Michael O'Sullivan) #6

Hi,

Nice one but it still doesn’t work if you apply physics …

Thanks anyway …


(Hans-Gerd Claßen) #7

No custom-js that changes attributes of elements with applied dynamic physics will work.
Hype records its own history for elements, custom changes are excluded.
physics is actually nice for effects, but don’t expect to much control …
Though I guess it’ll be improved asap …


(Greg) #8

Nice Hans, I’ve been trying to use timelines for something similar, but could not quite accomplish it.Thanks for posting this.


(Hans-Gerd Claßen) #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:


Pacman made with Hype
(Hans-Gerd Claßen) #10

and last but not least:
drag element contained by a polygon :smile:

polyDrag.hype.zip (11.1 KB)


(Thomas Lundin) #11

Thanks! Very interesting :slight_smile:


(Greg) #12

If you don’t mind using jQuery + jQuery UI, you can do a containment with a simple script for an element within an element.

$("#dragger").draggable({ containment: "parent" });

and put this in the innerHTML of a larger rectangle (the parent).

<div id="dragger" style="width: 100px; height: 100px; background:#060"></div>

jQ_Containment.hype.zip (108.8 KB)


(Hans-Gerd Claßen) #13

Of course greg :slight_smile: there are several libraries out there …


#14

Hi !

This is a nice and easy solution ! How to adapt the code for a container bigger than the viewport ? I tried this c = [289, -711, 218, -522]; but it doesn’t work. Also, how to deal with responsive images, so that the boundaries are not pixel fixed ? At the end, I just want to travel in a large picture with my finger, from one bound to the others (up/down and left/right). See my example.

Thank you for any help


(René) #15

Solved this, solution in this topic.