限制 jQuery UI 中的可拖动区域答案

【问题标题】：Restricting the draggable area in jQuery UI限制 jQuery UI 中的可拖动区域
【发布时间】：2013-06-08 19:09:33
【问题描述】：

我正在尝试在 div 中创建一个可拖动区域。它工作正常，但我不希望可拖动区域之外的空白区域，因此想要限制可以拖动的区域。到目前为止我想出的是here in this fiddle.

图像最初位于父 div 的左上角。如果将其拖动到右侧或底部，则可以看到空白，这是我不喜欢的。我该如何限制呢？

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

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

但我不知道怎么做。另外，如果整个页面是一个可拖动的元素（类似于谷歌地图），我该如何限制呢？

【问题讨论】：

那么当您将图像拖到右侧或底部时，您想要什么？
在这种情况下，拖动根本不应该发生。

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您可以通过将图像包装在一个容器 div 中来做到这一点，该容器 div 是图像的两倍，减去 widnow div 大小，并偏移 range div 的大小。那和遏制选项，你应该都准备好了。

jsFiddle example

HTML

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

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

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

【讨论】：

看准了！这正是我一直在寻找的。你能再解释一下吗？如果我想将可拖动区域设置为整页怎么办？那么如何设置宽高呢？
基本上你总是需要做的是创建一个两倍于图像大小的包装器或容器，减去视口的宽度/高度。然后，该包装器需要向左和顶部偏移，而图像则偏移相反的量，以便它从正确的位置开始。
这实际上工作得很好！谢谢。我必须做一些调整，以便在我正在制作的“游戏地图”周围留下一些填充，但是，相同的概念。杰出的！谢谢。