Question

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

我有一个div 200px by 200px我设置了溢出：隐藏在。然后我将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＆amp; y2相同）？

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

此外，对于“在div剪辑蒙版内拖动缩放图像”这一主要问题的任何其他快速简便的解决方案将非常感激。

Answer 1

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

Answer 2

确定。我现在有这个工作了。这是如何在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'});

希望这有助于某人！

使用jQuery draggable在div剪贴蒙版中拖动缩放图像？

2 个答案: