Draggable Inner Frame похож на Google Maps

Question

Играл с мыслью о javascript игре.Особенно RTS-типы ... вопрос в следующем.

Как мне работать над созданием перетаскиваемого внутреннего фрейма, похожего на карты Google?

Идея в том, что существует наложенный интерфейси намного большую перетаскиваемую карту внизу.Вроде как ваши обычные игры RTS.Однако я пытался найти простое решение для такого интерфейса.Есть ли готовый API для чего-то подобного? Или мне нужно сделать это с нуля?.

Если возможно, он должен работать и на iphone = X

Дополнительноinfo: Из того, что я знаю до сих пор, похоже, что карты Google используют перетаскиваемый элемент, расположенный поверх карты, для обнаружения событий перетаскивания.Однако я не понимаю, как, он все еще может поразить объекты под ним ...

Answer 1

Я просто бросил это вместе в секунду:

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

Используется пользовательский интерфейс jQuery (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 здесь для дальнейшего изучения.