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

Using JavaScript with Hype Function Library
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:

5 Likes
2

Interesting!
Do you have an example?

1 Like
3

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

4

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

3 Likes
5

cool! thank you very much.

6

Hi,

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

Thanks anyway …

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 …

1 Like
8

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

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
10

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

polyDrag.hype.zip (11.1 KB)

4 Likes
11

Thanks! Very interesting :slight_smile:

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)

3 Likes
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

example.jpg1024×768 256 KB

15

Solved this, solution in this topic.

1 Like
16

I’m having a huge issue with constrained dragging. I’m using your Script… but it’s just now working for me and I know it’s user-error… cause I know the script works. I want to create something like this…

image
image.png2208×274 20.4 KB

image
image.png2200×278 19.6 KB

I want to be able to drag two items inside a group which is clipped inside of another group… just can’t seem to figure it out…

image

I’ve tried to use your wonderful script… but it’s just now working. :frowning:

Oh… and constrain the drag to the X axis… so it only goes left and right…

Thanks for any help on this.

Chris