Thanks for the reply,
when i said constraints what i meant was containment, i just worded it wrong here, as you have pointed out.
Maybe this will help, i'm replacing the flex application
here with javascript.
I'm building it as a jquery plugin because it may be used in other sites as well, just with a different skin.
Shortly after posting, i re-structured my code by breaking down most of my methods into smaller internal methods that could then be reused. During the restructure, i built a _setDraggableConstraints method that accepted the plugin element. i use the plugin element to get the settings for the current element, get the width and height of the img, then calculate the x and y coordinates. Then, if the img is not yet draggable i initialize the draggable, otherwise i just set the containment option. I ended up going with 75% as the amount the image is allowed to be dragged outside of it's parent. it works well. Now any time that i resize the image (with my _resizeImage or _centerImage methods) the _setDraggableConstraints method gets ran.
function _setDraggableConstraints(elem) {
var opts = _getConfig(elem),
imgwidth = opts.img.width(),
imgheight = opts.img.height(),
x = [(-imgwidth/4)*3,opts.leftwidth-(imgwidth/4)],
y = [(-imgheight/4)*3,opts.leftheight-(imgheight/4)],
img = elem.find('.pvprod-main > img');
if (img.is('.ui-draggable')) {
img.draggable("option","containment",[x[0],y[0],x[1],y[1]]);
} else {
img.draggable({ containment : [x[0], y[0], x[1], y[1]]});
}
}
The only thing i haven't addressed yet is that the containment option is based on the x-y offset from the document, not the x-y position of the image, even though the image's parent is position: relative. When i get around to that i'll just have to add the left and top offset of the plugin element back to the x and y positions of the containment.
Edit: so far, the javascript version runs much cleaner and more precise than the flex version, even in the dreaded IE7 and 8. This app will be replaced with a static image for IE6 and mobile phones.
I guess the reason i called it constraints is because that's what it is in my case. i'm not trying to keep my image inside of a container, i'm trying to constrain it from moving more than x% outside of the container.
