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


I am creating an interface that allows a user to zoom in on an image and zoom in to the clipping version Drag around the mask div.

I have a div 200px 200px which I set overflow: is hidden. Then I am loading a study img ( & lt; img src = "etc" & gt; ) into that div, that is, say, 1000px by 1000px .

Then I use jQuery

  $ ("# my-image"). Draggable ({prevention: [-85,83,99,222]});  

Numbers are hard coded so far I can only get them through trial and error ...

The problem is that every time I make a change on the page (Ie is inserted another element above my container division) then the size of the page changes and my hard coded [x1, y1, x2, y2] stop working correctly.

The main issue is that I do not fully understand [x1, y1, x2, y2] ...

Here are the documents of jQuery: / P>

  http://docs.jquery.com/UI/Draggable#option-content  

Am I correct in thinking that x1 is the most draggable left The point is, x2 is the most draggable point right? (And also for y1 & y2)?

If so, what would be the best strategy to calculate them dynamically?

In addition to this, any other quick and easy solution of the main problem will be greatly appreciated "drag a zoomed image inside a Divine clipping mask".

  $ (this) .degrez (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  

Comments

Popular posts from this blog

MySql variables and php -

url rewriting - How to implement the returnurl like SO in PHP? -

Which Python client library should I use for CouchdB? -