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

Question

一直在玩javascript游戏的想法。特别是RTS类型......问题如下。

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

这个想法是有一个覆盖的 UI，下面有一个更大的可拖动地图。有点类似于您通常的 RTS 游戏。但是，我一直试图为这样的界面找到一个简单的解决方法。是否有类似的现成 API？，或者我需要从头开始做吗？。

如果可能，它也应该适用于 iphone =X

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

Answer 1

我只是在一秒钟内把它放在一起：

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

它使用 jQuery UI (http://jqueryui.com/home) 的“Draggable”功能。这是 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(); 
});

在此处查看Draggable 页面以进行进一步探索。