jQuery UI - 如何为draggable的“Containment”计算自定义值? jsfiddle补充道

时间:2013-02-02 22:07:59

标签: jquery jquery-ui

我有一个小容器和一个大的,可变大小的(图像是用户提交的)图像,我希望它可以拖动。我正在使用jQuery UI的“可拖动”功能进行垂直拖动并且效果很好,但我唯一的问题是你可以将图像向上或向下拖动足够远,使其边缘显示,你可以看到上面的空白区域在容器中或在容器下面。我希望它能够正常工作,例如,当图像的下边缘碰到容器的底部边框时,您无法再将其向上拖动。

我正在尝试使用

{ containment:[x1, y1, x2, y2] } 

选项使这项工作,并经过大量的试验和错误后,我可以计算不同大小的图像的正确值,但我无法弄清楚图像大小和包含值之间的函数关系。任何人都可以帮助我,或指出我正确的方向,图像大小和遏制应该有什么样的关系?容器的固定尺寸为360x240。非常感谢。

JSfiddle:http://jsfiddle.net/Ey74c/我不希望容器中的任何空白区域显示出来 - 即你不能将图像向上或向下拖动足够远以让它发生。我尝试设置遏制:“父”,它不再滚动?

2 个答案:

答案 0 :(得分:1)

要解决此问题,您应该使用:{ containment:[x1, y1, x2, y2] }

$("#container img").draggable({
    containment: [(parseInt($("#myImage").width()) - parseInt($("#container").width())) * -1, 
                  (parseInt($("#myImage").height()) - parseInt($("#container").height())) * -1, 0, 0]
});

jsFiddle

x1 = - (img.width - container.width)

y1 = - (img.height - container.height)

x2 = 0

y2 = 0

答案 1 :(得分:0)

为您的图片添加id并使用containment,如下所示:http://jsfiddle.net/Ey74c/2/

<div id="container">
    <img id="myImage" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"
    />
</div>

$("#container img").draggable({
    containment: [$('#myImage').width() * -1, $('#myImage').height() * -1, 0, 0]
});