限制jQuery UI中的可拖动区域

我想在div中创建一个可拖动的区域。 它工作正常但我不希望可拖动区域外的空白区域因此想要限制可以拖动的区域。 到目前为止我所得到的就是这个小提琴。

图像最初位于父div的左上角。 如果将其拖动到右侧或底部，您可以看到我不喜欢的空白区域。 我怎么能限制这个？

我认为可以使用jQuery UI的Draggable事件中的Containment参数来完成

$( ".selector" ).draggable({ containment: "" }); 

但我无法弄清楚如何。 此外，如果整个页面是一个可拖动的元素（类似于谷歌地图），我该如何限制？

Answer 1

您可以通过将图像包装在容器div中来实现此目的，该容器div是图像的两倍，减去widnow div大小，并且偏移范围div的大小。 那个和收容选项，你应该全部设置。

jsFiddle示例

HTML

JS

 jQuery("#map").draggable({ containment: $('#container') }); 

CSS

 #range { width:400px; height:400px; overflow:hidden; border:1px solid black; position:relative; } #container { position:absolute; top:-800px; left:-1520px; width: 3440px; height: 2000px; } #map { width: 1920px; height: 1200px; top:800px; left:1520px; } 

下图可以让您了解容器相对于图像和视口的大小。 视口是图像中间较小的正方形，带有黑色边框，包装器是较大的整体矩形。 您可以将图像视为移动到极限位置。