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
Per http://api.jqueryui.com/draggable/#option-containment
Containment:
So the numbers are the starting and ending coordinates in X,Y format. In your fiddle, you have:
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.