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