2

这是网站的链接：战争游戏地图

我在一个较小的 div 中有一个大的 jQuery 可拖动 div（将地图图像设置为背景），该 div 上有溢出：隐藏。重点是让用户像在 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>
4

1 回答 1

1

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

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

您可以在此处找到更多详细信息。

为了使可拖动对象大于包含区域，您可以使用以下技巧：

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

您可以在此处查看完整的工作示例。

于 2013-01-14T13:11:35.810 回答