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

Question

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.

Answer 1

$(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;
        }
    }
});

Answer 2

Ok. I've got this working now. This is how to set up a draggable image within a div clipping mask so that it is completely dynamic and works no matter how you resize the page.

The HTML/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;">
   <img id="my-image" src="big-image.jpg" width="1000" height="1000"/>
</div>

The jQuery/JavaScript

// Make sure it always starts @ zero position for below calcs to work
$("#my-image").css({top: 0, left: 0});

var maskWidth  = $("#my-mask").width();
var maskHeight = $("#my-mask").height();
var imgPos     = $("#my-image").offset();
var imgWidth   = $("#my-image").width();
var imgHeight  = $("#my-image").height();

var x1 = (imgPos.left + maskWidth) - imgWidth;
var y1 = (imgPos.top + maskHeight) - imgHeight;
var x2 = imgPos.left;
var y2 = imgPos.top;

$("#my-image").draggable({ containment: [x1,y1,x2,y2] });
$("#my-image").css({cursor: 'move'});

Hope this helps someone!