Edit Question - KnowledgeHub

Title Body

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.

Tags (comma-separated) Cancel