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

Justin Vincent picture Justin Vincent · Oct 19, 2009 · Viewed 18.1k times · Source

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

Lauri picture Lauri · Sep 20, 2011
$(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;
        }
    }
});