这是该网站的链接:战争游戏地图 http://game.creeight.se/
我有一个大的 jQuery 可拖动 div(将地图图像设置为背景),里面有一个较小的 div,上面有溢出:隐藏。重点是让用户像在maps.google.com 上一样拖动地图。
虽然谷歌地图有一个水平循环地图,但我的地图停在太平洋的两侧。现在,用户可以将地图在两侧拖得太远,以便红色背景开始显示在左侧或右侧。
当地图边缘出现时,在红色背景开始显示之前,如何使用 jQuery 停止拖动?
(我知道地图现在很难看,但它正在建设中。)
The 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();
The HTML
<div id="theBody">
<div id="draggable" class="ui-widget-content"></div>
</div>
The draggable
jquery-ui 的功能提供了定义容器的可能性,这将限制拖动项目的移动。
通过设置一个containment
初始化您的可拖动参数时,您将达到预期的目标。
在你的情况下你应该使用
$('#draggable').draggable({containment:"#theBody"});
您可以找到更多详细信息here http://jqueryui.com/draggable/#constrain-movement.
为了使可拖动区域大于包含区域,您可以使用以下技巧:
- create
viewContainer
div 为您想要的容器大小(例如 300x300),其中overflow:hidden
- 附加到此 div a
draggableContainer
这将是可拖动意义上的真正容器。第二个 div 必须足够大才能包含您的可拖动对象。
- 附加到此
draggableContainer
你的可拖动的draggable
,假设 500x500
- 调整大小和位置
draggableContainer
根据另外两个的大小。在这种情况下,为了允许整体平移draggable
,它需要是700x700
with a -200x-200
offset
你可以看到一个完整的工作示例在这里 http://jsfiddle.net/UjztS/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)