4

Been playing with the thought of javascript game. Especially RTS types... the question is as followed.

How do i work on creating a draggable inner frame, similar to google maps?

The idea, is that there is an overlaying UI, and a much larger draggable map underneath. Sort of similar to your usual RTS games. However i been trying to figure a simple work around for such an interface. Is there a ready made API for something similar?, or would i need to do it from scratch?.

If possible, it should work on an iphone too =X

Additional info: From what i know so far, it seems like google maps uses a draggable element placed ontop of the map, detecting the drag events. What i dun understand however, is how, it is still able to hit objects beneath it...

PicoCreator
  • 9,886
  • 7
  • 43
  • 64

2 Answers2

7

I just threw this together in a second:

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

It uses jQuery UI's (http://jqueryui.com/home) "Draggable" function. Here's the HTML and 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>

And here's the jQuery:

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

Take a look at the Draggable page here for further exploration.

Purag
  • 16,941
  • 4
  • 54
  • 75
  • Exactly what i wanted on a PC... a pity it does not work for the iphone though... seriously wonder how google maps did it for the iphone, does not help that i dun have a debugger in the iphone safari... haha – PicoCreator Aug 14 '11 at 11:44
  • 1
    @pico.creator: Take a look [here](http://stackoverflow.com/questions/2870432/how-can-i-get-jquery-uis-draggable-and-sortable-functions-to-work-on-the-iphone). You might find your answer. – Purag Aug 14 '11 at 11:49
  • Nice... Quite a fair bit of work to code, to get what i want working... But this is surely a good start. The idea of capturing all the drag events in the iphone and simulating it, may be daunting... but should be worth it =) – PicoCreator Aug 14 '11 at 12:10
-1

I don't think this answer is valid, as jQueryUI's draggable does not work on touch devices and PicoCreator clearly stated that he needs it to work on an iPhone/iOS/Touch Interface

user3664178
  • 39
  • 3
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/29970965) – j__carlson Oct 01 '21 at 15:57