Question

结帐this jsfiddle

我在这里尝试做的是通过父div显示图像。

<div id="main">
    <img src="http://....">
</div>

父元素小于图像，并且溢出设置为隐藏。使用jQuery UI中的Draggable widget在I＆＃m; m周围拖动图像。

我希望能够通过拖动来展示整个图像，但我不想看到#main的背景颜色。所以我不能将图像拖到远方向。我认为这可以使用＆＃39;收容＆＃39;财产，但我不能让这个工作。

例如，如果#main是200 x 200且图像是300x300，我会说它应该看起来像这样

$(img).draggable({containment: [0,0,-100,-100]});

为什么jsfiddle没有工作以及如何解决这个问题的任何建议？

Answer 1

我必须考虑容器的宽度，位置，边框和图像尺寸。

var img = $('img'), 
    pos = { offset: $('#main').offset(), 
            height: $('#main').height(), 
            width: $('#main').width() 
    };
img.draggable({ 
    containment: [
        pos.offset.left + pos.width + 1 - img.width(), 
        pos.offset.top + pos.height + 1 - img.height(), 
        pos.offset.left + 1, 
        pos.offset.top + 1 ]
});

Here is an updated jsfiddle.

可拖动窗口小部件中的“包含”如何工作

1 个答案: