2

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

我正在尝试使用

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

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

JSfiddle： http: //jsfiddle.net/Ey74c/我不希望容器内的任何空白区域显示 - 即，您不能将图像向上或向下拖动到足够远的地方来让这种情况发生。我尝试设置遏制：“父母”，它不再滚动？

4

2 回答 2

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

于 2013-02-02T23:39:57.427 回答
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]
});
于 2013-02-02T22:58:38.473 回答