Drag a zoomed image within a div clipping mask using jQuery draggable?

clipping, draggable, html, jquery

Solution

$(this).draggable({
    drag: function(event, ui) {
        if (ui.position.top > 0) {
            ui.position.top = 0;
        }
        var maxtop = ui.helper.parent().height() - ui.helper.height();
        if ( ui.position.top < maxtop) {
            ui.position.top = maxtop;
        }
        if ( ui.position.left > 0) {
            ui.position.left = 0;
        }
        var maxleft = ui.helper.parent().width() - ui.helper.width();
        if ( ui.position.left < maxleft) {
            ui.position.left = maxleft;
        }
    }
});

Problem

I'm creating an interface to allow a user to zoom in on an image and drag the zoomed version around within a clipping mask div. I have a div `200px by 200px` that I set overflow: hidden on. Then I load a std img (`<img src="etc">`) into the div that is, say, `1000px by 1000px`. Then I use jQuery ``` $("#my-image").draggable({ containment: [-85,83,99,222] }); ``` The numbers are hard coded. So far I can only find them by trial and error... The problem is that each time I make a change to the page (Ie insert another element above my container div) the page size changes and my hard coded [x1, y1, x2, y2] stop working correctly. The main issue is I don't fully understand [x1, y1, x2, y2] ... Here is the jQuery docs regarding this: ``` http://docs.jquery.com/UI/Draggable#option-containment ``` Am I right in thinking that x1 is the left most draggable point, x2 is the right most draggable point? (and same for y1 & y2)? If so, what would be the best strategy to calculate them dynamically? Also, any other quick and easy solutions to the main problem of "Drag a zoomed image within a div clipping mask" would be much appreciated.

Original source