jQuery UI 可拖动包含区域随屏幕大小而变化答案

【问题标题】：jQuery UI draggable containment area changes with screen sizejQuery UI 可拖动包含区域随屏幕大小而变化
【发布时间】：2012-05-18 17:40:08
【问题描述】：

我有一个较大的图像，它包含在一个较小的 div 中。 div 应用了position:absolute; top:10px; left:10px; width:563px; height:563px; z-index:200; overflow:hidden，因此只有图像的一部分可见。该 div 位于另一个 div 中，该 div 在屏幕上以width:1000px; margin:0 auto; position:relative; 为中心

我已将$('#theImage').draggable({cursor: 'move', containment: [-523,-738,361,146]}); 应用于图像，这意味着它可以在 div 周围拖动，但图像的外边缘永远不会超出 div 的外边缘。（即图像的左边缘不能拖到 div 的左边缘之外，右、上和下边缘也是如此）因此图像总是完全填满 div；没有可见的背景。

当我的浏览器最大化时这工作正常，但当它不是时会改变 - 我假设包含 X 和 Y 值是从浏览器窗口而不是父 div 计算的。有什么办法可以强制它从 div 计算？（将容器设置为“父级”不起作用，因为它允许将图像拖到看不见的地方（即，现在可以将图像的每个边缘拖到 div 的相对边缘）。

【问题讨论】：

你有没有机会在 jsfiddle.net 上做一个演示，这样更容易玩弄并直接看到问题？您可以使用来自 lorempixel.com 的任意大小的占位符图像，并在资源下包含 jquery ui css
我在jsfiddle 上创建了一个演示，使用我网站上的可拖动图像。如果屏幕面板设置为结果面板是我的 1600x1200 监视器的一半宽度和一半高度，则图像在 div 内完美滚动。但是，如果您更改小提琴面板（或浏览器窗口）的大小，图像要么不会一直滚动到边缘，要么会滚动得太远，显示背景为白色。有什么想法吗？

标签： jquery html css jquery-ui draggable

【解决方案1】：

我遇到了同样的问题，我是这样解决的：

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] });

最后一行包含左上角和浏览器宽度/高度之间的图像。希望这可以帮助！

【讨论】：