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

Answer 1

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

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!