限制jQuery UI中的可拖动区域

我正在尝试在div中创建一个可拖动区域。它可以正常工作，但我不希望在可拖动区域外出现空白，因此希望限制可以拖动的区域。到目前为止，我得出的结论是

图像最初定位在父div的左上角。如果将其拖动到右侧或底部，可以看到空白，我不希望看到空白。我如何限制这一点

我认为可以使用jqueryui的Draggable事件中的Containment参数

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

---

但我不知道怎么做。另外，如果整个页面是一个可拖动的元素（类似于Google Maps），我如何限制它？

您可以将图像包装在一个容器div中，该容器div的大小是图像的两倍，减去widnow div的大小，偏移量是范围div的大小。这和包含选项都应该设置好

HTML

<div id="range">
    <div id="container">
        <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg" id="map" />
    </div>
</div>

CSS

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

#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;
}

下图应该让您了解容器相对于图像和视口的大小。视口是图像中间的一个较小的正方形，有一个黑色的边框，而包装是较大的整体矩形。您可以看到图像被移动到极端位置

---

那么，当你将图像向右或向下拖动时，你想要什么呢？在这种情况下，拖动根本不应该发生。请注意！这正是我想要的。请你再解释一下好吗？如果要将可拖动区域设置为整页，该怎么办？那么如何设置宽度和高度呢？基本上，您总是需要创建一个包装器或容器，其大小是图像大小的两倍，减去视口的宽度/高度。然后，该包装需要向左和向上偏移，而图像偏移量正好相反，以便它从正确的位置开始。这实际上非常有效！谢谢我不得不做一些调整，在我正在制作的“游戏地图”周围留下一些空白，但是，相同的概念。明亮的非常感谢。