我有一个小容器和一个大的,可变大小的(图像是用户提交的)图像,我希望它可以拖动。我正在使用jQuery UI的“可拖动”功能进行垂直拖动并且效果很好,但我唯一的问题是你可以将图像向上或向下拖动足够远,使其边缘显示,你可以看到上面的空白区域在容器中或在容器下面。我希望它能够正常工作,例如,当图像的下边缘碰到容器的底部边框时,您无法再将其向上拖动。
我正在尝试使用
{ containment:[x1, y1, x2, y2] }
选项使这项工作,并经过大量的试验和错误后,我可以计算不同大小的图像的正确值,但我无法弄清楚图像大小和包含值之间的函数关系。任何人都可以帮助我,或指出我正确的方向,图像大小和遏制应该有什么样的关系?容器的固定尺寸为360x240。非常感谢。
JSfiddle:http://jsfiddle.net/Ey74c/我不希望容器中的任何空白区域显示出来 - 即你不能将图像向上或向下拖动足够远以让它发生。我尝试设置遏制:“父”,它不再滚动?
答案 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]
});
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]
});