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

我正在创建一个界面,允许用户放大图像,并在缩放蒙版div内拖动缩放版本.

我有一个200px×200px的div,我设置overflow：hidden.然后,我将一个std img(< img src =“etc”>)加载到div,即1000px x 1000px.

然后我使用jQuery

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

这些数字是硬编码的.到目前为止,我只能通过反复试验找到他们

问题是,每次我更改页面(即在容器div上方插入另一个元素)时,页面大小变化,我的硬编码[x1,y1,x2,y2]停止正常工作.

主要的问题是我不完全明白[x1,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 ( 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;
        }
    }
});

原文地址：https://www.jb51.cc/jquery/176275.html