使用jQuery可拖动拖动div剪贴蒙版内的缩放图像？ [英] Drag a zoomed image within a div clipping mask using jQuery draggable?

问题描述

我正在创建一个界面，以允许用户放大图像并在剪裁蒙版div内拖动缩放版本。

我有一个div 200px乘200px ，我设置了overflow：hidden on。然后，我将一个std img（< img src =etc> ）加载到div中，例如 1000px×1000px <

$ p
$ b然后我使用jQuery

$ $ p $ $ $ $ $ $ $ $ $ $ （＃my-image）。draggable（{containment：[-85,83,99,222]}）;


这些数字是硬编码的。到目前为止，我只能通过试验和错误找到他们......问题是，每次我对页面进行更改（即在我的容器上插入另一个元素div）页面大小发生变化，我的硬编码[x1，y1，x2，y2]停止工作。

主要问题是我不完全理解[x1 ，y1，x2，y2] ...

下面是关于这个jQuery文档：

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

我是否认为x1是最左边的可拖动点，x2是最右边最可拖动的点？ （和y1和y2相同）？

如果是这样，动态计算它们的最佳策略是什么？

此外，任何其他快速和简单的解决方案的主要问题拖动一个div剪贴蒙版中的缩放图像将不胜感激。

解决方案

  $（this）.draggable（{
 drag：function（event，ui）{
 if（ui.position.top> ; 0）{
 ui.position.top = 0; 
} 
 var maxtop = ui.helper.parent（）。height（） -  ui.helper.height（）; 
 if if（ui.position.top< maxtop）{
 ui.position.top = maxtop; 
} 
 if（ui.position.left> 0）{
 ui.position.left = 0; 
} 
 var maxleft = ui.helper.parent（）。width（） -  ui.helper.width（）; 
 if（ui.position .left< maxleft）{
 ui.position.left = maxleft; 
} 
} 
}）; 
  

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.

解决方案

$(this).draggable({
    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 < maxtop) {
            ui.position.top = maxtop;
        }
        if ( ui.position.left > 0) {
            ui.position.left = 0;
        }
        var maxleft = ui.helper.parent().width() - ui.helper.width();
        if ( ui.position.left < maxleft) {
            ui.position.left = maxleft;
        }
    }
});

这篇关于使用jQuery可拖动拖动div剪贴蒙版内的缩放图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！