javascript - 类似于谷歌地图的可拖动内框

Question

一直在玩javascript游戏的想法。尤其是 RTS 类型……问题如下。

我如何创建类似于谷歌地图的可拖动内部框架？

这个想法是，有一个重叠的 UI，下面有一个更大的可拖动 map 。有点类似于您通常的 RTS 游戏。但是我一直在尝试为这样的界面想出一个简单的解决方法。有类似的现成 API 吗？还是我需要从头开始？

如果可能的话，它应该也能在iphone上运行=X

附加信息: 据我所知，谷歌地图似乎使用放置在 map 顶部的可拖动元素来检测拖动事件。然而，我不明白的是，它仍然能够击中它下面的物体......

Answer 1

我很快就把它拼凑起来了:

http://jsfiddle.net/purmou/mrJtG/

它使用 jQuery UI (http://jqueryui.com/home) 的“可拖动”功能。这是 HTML 和 CSS:

#range {
    width:400px;
    height:400px;
    overflow:hidden;
    border:1px solid black;
}

<div id="range">
    <img src="http://img1.loadtr.com/k-483417-Map_of_the_World.gif" id="map" />
</div>

这是 jQuery:

jQuery(document).ready(function() {
    jQuery("#map").draggable(); 
});

查看可拖动页面 here进一步探索。