title: Drag a zoomed image within a div clipping mask using jQuery draggable?
body: <p>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. </p>
  
  <p>I have a div <code>200px by 200px</code> that I set overflow: hidden on. Then I load a std img (<code>&lt;img src="etc"&gt;</code>) into the div that is, say, <code>1000px by 1000px</code>.</p>
  
  <p>Then I use jQuery </p>
  
  <pre><code>$("#my-image").draggable({ containment: [-85,83,99,222] });
  </code></pre>
  
  <p>The numbers are hard coded. So far I can only find them by trial and error...</p>
  
  <p>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.</p>
  
  <p>The main issue is I don't fully understand [x1, y1, x2, y2] ...</p>
  
  <p>Here is the jQuery docs regarding this:</p>
  
  <pre><code>http://docs.jquery.com/UI/Draggable#option-containment
  </code></pre>
  
  <p>Am I right in thinking that x1 is the left most draggable point, x2 is the right most draggable point? (and same for y1 &amp; y2)?</p>
  
  <p>If so, what would be the best strategy to calculate them dynamically?</p>
  
  <p>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.</p>