1

I am trying to develop a map for a game. The whole map is a single image that is 6000px x 6000px. The map is shown as a background of a div (container) that is 6000px x 6000px as well. My question is what is the easiest way to make my map draggable, so you can click in the middle of the screen and just drag to the sides.

The map itself (the div container) shouldn't change position as I plan to populate it with POI. I don't need any funcy staff, like zoom etc, just that the user doesn't need to use sliders in the webpage to navigate, just to click on map and drag left/right/up/down to move.

Sorry if this is answered before, I couldn't find an answer.

Gigi_Falcone
  • 25
  • 6
  • Maybe this question helps: http://stackoverflow.com/q/8569095/1741542. Otherwise, you might want look into jquery-ui draggable: http://jqueryui.com/draggable/ – Olaf Dietsche Jan 24 '14 at 00:13
  • Hmm I saw the draggable jqueryui, but I think that it only allows to drag div units. I will check it a bit later, but I have zero expirience. – Gigi_Falcone Jan 24 '14 at 00:15

1 Answers1

0

Here is a minimal example, which allows dragging an image inside a div 

<div id="container">
    <img id="draggable" src="http://lorempixel.com/800/800" />
</div>

#container {
    width: 400px;
    height: 400px;
    overflow: hidden;
}

$('#draggable').draggable();

See full JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
  • Hey thanks for your contribution, but this solution will not work with my POI. This map is for a game, so it will load positions of ingame objects, like a caffe shop, which will have a dot on the map with coordinates exampe 554,1345.99 If the map/image underneath would move, the points would have no pourpose/sense. – Gigi_Falcone Jan 24 '14 at 00:26
  • @user3230057 wrap all the objects and the map in another div, then you could use this solution. – Gleno Jan 24 '14 at 00:47
  • Oh, so you mean that the map and the points move together? Clever :) – Gigi_Falcone Jan 24 '14 at 00:59