使用jQuery显示边时停止拖动

Question

以下是该网站的链接：War game map

我有一个大的jQuery draggable div（地图图像设置为背景）在一个较小的div里面有溢出：隐藏在它上面。重点是让用户像maps.google.com上一样拖动地图。

虽然Google地图水平循环地图，但我的地图会在太平洋的两个边缘停止。就像现在一样，用户可以将地图拖得太远，以便红色背景开始显示在左侧或右侧。

在红色背景开始显示之前，当地图边缘出现时，如何使用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>

Answer 1

jquery-ui的draggable功能提供了定义容器的可能性，这将限制被拖动项目的移动。 通过在初始化可拖动时设置containment参数，您将达到预期目标。 在你的情况下你应该使用

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

您可以找到更多详情here。

为了使可拖动区域大于容器区域，您可以使用以下方法：

1. 使用viewContainer
创建容器所需大小的overflow:hidden div（例如300x300）
2. 在此div中附加一个draggableContainer，它将成为可拖动意义上的真正容器。第二个div必须足够大，以包含你的拖拽。
3. 追加draggableContainer您的可拖动draggable，让我们说500x500
4. 根据另外两个人的大小调整draggableContainer的大小和位置。在这种情况下，为了允许整个draggable进行平移，需要700x700 -200x-200偏移

您可以看到complete working example here。