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

Question

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

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

这个想法是，有一个覆盖的UI，以及一个更大的可拖动地图。类似于您通常的RTS游戏。但是我一直试图为这样的界面做一个简单的工作。是否有类似的类似的现成API？或者我需要从头开始做什么？。

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

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

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以进一步探索。