how does jquery ui draggable containment work?

Question

EDIT I have finally figured out the problem i have been having on my site, it is demonstrated in this example: http://jsfiddle.net/DerNa/10/. What you are looking at here is the #frame container being moved from 0/0 position (to 50/50 position). For some reason the picture is relative to the "Window" instead of the parent container. Does anyone know how i can make it relative to the parent container?

Old Question Follows

I can't figure out how this works for example: http://jsfiddle.net/DerNa/4/

Basically my questions is from what i found online and what i can infer by playing around with the example is that [container_width-image_width, container_height-image_height, ? ?]. it makes sense that the first two is left and top edge of the invisible container that you want the draggable to be contained in. However, I am not sure how the last two values work, they are either right/bottom or width/height, but neither seem to make much sense in the example provided.

If anyone can shed some light on this, it would be greatly appreciated!

Jason

Solution

Per http://api.jqueryui.com/draggable/#option-containment

Containment:

Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].

So the numbers are the starting and ending coordinates in X,Y format. In your fiddle, you have:

containment:[-500,-127,0,0]

which translates into -500,-127 and 0,0. So basically the containment is set to a position 500 pixels to the left and 127 pixels above the starting position with an ending containment of 0,0 or rather the place where the image sits originally.

Comments

[FurtiveFelon]

Hey thanks a lot for your answer. After playing around with my site and the example. I finally figured out the actual problem i am having. It would be greatly appreciated if you can take a look to see if there is anything you can do. Thanks a lot :)

[j08691]

Just change the containment to containment:'parent'

[FurtiveFelon]

ok, wrong problem, my problem is that the image won't fit in parent, so setting containment:'parent' would just break horribly. Here is a demonstration: jsfiddle.net/DerNa/10

[j08691]

So what's the difference between the fourth and tenth revision to this fiddle? I can see the jump in rev 10, but what are you shooting for? Isn't rev 4 close to what you want?

[FurtiveFelon]

the 10th revision has a 50px margin for #frame, which is causing problems, basically the problem is containment [x1, y1, x2, y2] is relative to the window, which is not desirable. I would rather like the containment to be relative to parent. Since no complex site have the relevant frame stick right up to the edge of screen.

[maxwell2022]

Here is jsfiddle with draggable boundary according image size: jsfiddle.net/maxwell2022/DerNa/161