使用jQuery可拖动拖动div剪贴蒙版内的缩放图像？

Question

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

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

然后我使用jQuery

$("#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剪贴蒙版缩放图像”将不胜感激。

Answer 1

好的。我现在有这个工作。这是如何在div剪贴蒙版内设置可拖动的图像，以便它完全动态，并且无论您如何调整页面大小，都能正常工作。

的HTML/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;"> 
    <img id="my-image" src="big-image.jpg" width="1000" height="1000"/> 
</div> 

jQuery的/ JavaScript的

// Make sure it always starts @ zero position for below calcs to work 
$("#my-image").css({top: 0, left: 0}); 

var maskWidth = $("#my-mask").width(); 
var maskHeight = $("#my-mask").height(); 
var imgPos  = $("#my-image").offset(); 
var imgWidth = $("#my-image").width(); 
var imgHeight = $("#my-image").height(); 

var x1 = (imgPos.left + maskWidth) - imgWidth; 
var y1 = (imgPos.top + maskHeight) - imgHeight; 
var x2 = imgPos.left; 
var y2 = imgPos.top; 

$("#my-image").draggable({ containment: [x1,y1,x2,y2] }); 
$("#my-image").css({cursor: 'move'}); 

希望这可以帮助别人！

Answer 2

$(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; 
     } 
    } 
});