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

Posted

技术标签:

【中文标题】使用jQuery可拖动在div剪贴蒙版中拖动缩放图像?【英文标题】:Drag a zoomed image within a div clipping mask using jQuery draggable? 【发布时间】:2010-12-08 03:08:12 【问题描述】:

我正在创建一个界面,以允许用户放大图像并在剪贴蒙版 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 和 y2 也一样)?

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

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

【问题讨论】:

【参考方案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;
        
    
);

【讨论】:

大声笑.. 不知道为什么这没有更多的选票。这对我有用,谢谢。 谢谢 - 这太棒了! 它没有得到比应有的更多票数的原因是因为代码不是很可读【参考方案2】:

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

html/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;">
   <img id="my-image" src="big-image.jpg"  />
</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');

希望这对某人有所帮助!

【讨论】:

这太棒了。你肯定帮了我! 谢谢,太好了。我希望 js 仍然是最新的,因为这为我解决了一个真正的问题。 你成就了我的一天!设置@zero 位置很重要。我正在使用“变换:比例(2);”加倍的缩放图像css 属性,所以我还必须设置 'transform-origin: left top 0px;'而且比它正常工作!

以上是关于使用jQuery可拖动在div剪贴蒙版中拖动缩放图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何实现拖动修改网页中div模块大小

Jquery可拖动缩放问题

jQuery 可拖动和 -webkit-transform: scale();

使用 CSS 变换缩放的 jQuery 拖动/调整大小

可拖动元素在缩放 div 上的准确放置

jQuery可拖动克隆的div