I'm trying to display part of a large image, and have it draggable to reveal the other parts (like Google Maps on a single image).

I have a fixed size <div> wrapping the <img>.  The <div> css has overflow:hidden, and I call .draggable() on the image.

This basically works, except I want the dragging to stop when they reach the ends of the image.  I'm trying the 'containment' option of draggable, but there's a few problems.  'contrainment':'parent' does not work (should it? maybe it should handle draggables larger than their parent?).

So, I'm trying the [x1,y1,x2,y2] version of containment.  The docs don't make it clear, but these seem to be absolute page coords?  I think I have something that basically works, but it requires figuring out the location of the <div> and the size of the image, and calculating accordingly.  Is there any an easier way?