我有一个大图像，它包含在一个较小的 div 中。 div 有 position:absolute;顶部:10px；左:10px；宽度:563px；高度:563px； z指数:200； overflow:hidden 应用于它所以只有一部分图像是可见的。该 div 位于另一个 div 中，该 div 以 width:1000px; 将页面居中显示在屏幕上； margin :0 自动；position:relative；
我已将 $('#theImage').draggable({cursor: 'move', containment: [-523,-738,361,146]}); 应用于图像，这意味着它可以围绕 div 拖动，但图像的外边缘永远不会超出 div 的外边缘。 (即图像的左边缘不能被拖动到 div 的左边缘之外，这同样适用于右边缘、上边缘和下边缘)因此图像总是完全填满 div；没有背景可见。
这在我的浏览器最大化时工作正常，但当它没有最大化时会发生变化 - 我假设包含 X 和 Y 值是从浏览器窗口计算的，而不是父 div。有什么办法可以强制从 div 计算它？ (将包含设置为“父级”不起作用，因为它允许将图像直接拖到看不见的地方(即，现在可以将图像的每个边缘拖动到 div 的相对边缘)。
最佳答案
我遇到了同样的问题，我是这样解决的:
var windowX = $( window ).width(); //determines the width of the browser window
var windowY = $( window ).height();//determines the height of the browser window
var imageX = 2000; //put the width of your image here. my image was 2000x1000
var imageY = 1000;//image height
$("#theImage").draggable({ containment: [(windowX - imageX),(windowY - imageY),0,0] });
最后一行在左上角和浏览器的宽度/高度之间包含您的图像。希望这可以帮助!
关于jQuery UI 可拖动包含区域随屏幕大小而变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10657290/