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
Post a Comment