gpt4 book ai didi

jquery - 当边缘显示时停止拖动 jQuery

转载 作者:行者123 更新时间:2023-12-01 04:55:57 26 4
gpt4 key购买 nike

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

我有一个大的 jQuery 可拖动 div(将 map 图像设置为背景),里面有一个较小的 div,上面有溢出:隐藏。重点是让用户像在maps.google.com 上一样拖动 map 。

虽然 Google map 有一个水平循环 map ,但我的 map 停在太平洋的两侧。现在,用户可以将 map 在两侧拖动得太远,以便红色背景开始显示在左侧或右侧。

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

(我知道 map 现在很难看,但它正在 build 中。)

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>

最佳答案

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

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

您可以找到更多详细信息here .

为了使可拖动区域大于包含区域,您可以使用以下技巧:

  1. 创建viewContainer div 为您想要的容器大小(例如 300x300),其中 overflow:hidden
  2. 在此 div 附加 draggableContainer这将是可拖动意义上的真正容器。第二个 div 必须足够大才能包含您的可拖动对象。
  3. 附加到此 draggableContainer你的可拖动draggable ,假设 500x500
  4. 调整 draggableContainer 的大小和位置根据另外两个的大小。在这种情况下,为了允许整体平移draggable ,它需要是 700x700-200x-200偏移量

您可以看到complete working example here .

关于jquery - 当边缘显示时停止拖动 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14316525/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com