使用jQuery显示边时停止拖动

以下是该网站的链接：

我在一个较小的div中有一个大的jQuery可拖动div（以地图图像为背景），该div上有溢出：hidden。关键是让用户像在maps.google.com上一样拖动地图

虽然谷歌地图在水平方向上有一个循环地图，但我的地图在太平洋的两边都停了下来。现在，用户可以将地图两边拖得太远，这样红色背景就会开始显示在左侧或右侧

在红色背景开始显示之前，当地图边缘出现时，如何使用jQuery停止拖动

（我知道这张地图现在很难看，但它正在建造中。）

Css：

body {

overflow:hidden;
background-color: #ff0000;

}

#theBody {

position: absolute;
top: 50px;
left: 0px;
width: 1px;
height: 1px;
overflow: hidden;

}

#draggable {

background-image: url(map.gif);
width: 3944px;
height: 2258px;

}

jQuery：

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

viewportHeight = (viewportHeight - 50);

$('#theBody').css({'width': viewportWidth});
$('#theBody').css({'height': viewportHeight});

$('#draggable').draggable();

HTML

<div id="theBody">

    <div id="draggable" class="ui-widget-content"></div>

</div>

---

jquery ui中的

可拖动

功能提供了定义容器的可能性，该容器将限制拖动项目的移动。 通过在初始化Dragable时设置

包容

参数，您将达到所需的目标。 在你的情况下，你应该使用

$('#draggable').draggable({containment:"#theBody"});

你可以找到更多的细节

为了使拖拉装置大于容器区域，您可以使用以下技巧：

使用

溢出：隐藏

在此div中附加一个

draggableContainer

，它将是真正的可拖动容器。第二个div必须足够大，以容纳可拖动的文件

附加到这个

draggableContainer

您的draggable

draggable

，比如500x500

根据其他两个容器的大小调整

可拖动容器的大小和位置。在这种情况下，为了允许整体平移
可拖动
，需要
700x700
，偏移量
-200x-200

---

你可以看到一个好问题。。我也想知道答案：-）你应该在这里发布相关代码，以便在将来你的网站不再在线时帮助其他用户。如果你能设置一个JSFIDLE，那也太好了。是的，你说得太对了。这是代码。了解，请参阅answerWow Romain中的修复。。。这看起来是一个可能的解决方案。我会查出来的，谢谢！没问题，只要接受答案，如果它涵盖了你的问题，它就行了！谢谢你，罗曼，你让我开心了。。。不，我的星期：D