Question

Here is the link to the site: War game map

I have a big jQuery draggable div (with a map image set as the background) inside a smaller div that has overflow:hidden on it. The whole point is to let the user drag the map around like on maps.google.com.

While Google Maps has a looping map horizontally, my map stops on both edges in the Pacific. As it is now, the user can drag the map too far on both sides, so that the red background start showing on the left or the right.

How can i with jQuery stop the dragging when the edge of the map appears, before the red background starts showing?

(I know that the map is ugly as hell right now, but it is under construction.)

The Css:

body {

overflow:hidden;
background-color: #ff0000;

}

#theBody {

position: absolute;
top: 50px;
left: 0px;
width: 1px;
height: 1px;
overflow: hidden;

}

#draggable {

background-image: url(map.gif);
width: 3944px;
height: 2258px;

}

The jQuery:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

viewportHeight = (viewportHeight - 50);

$('#theBody').css({'width': viewportWidth});
$('#theBody').css({'height': viewportHeight});

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

The HTML

<div id="theBody">

    <div id="draggable" class="ui-widget-content"></div>

</div>

Answer 1

The draggable feature from jquery-ui offers the possiblity to define a container, that will limit the movements of the dragged item.
By setting a containment parameter when initializing your draggable, you will attain the desired goal.
In your case you should use

$('#draggable').draggable({containment:"#theBody"});

You can find more details here.

In order to have a draggable larger than the containement area, you can use the follwing trick :

1. create viewContainer div of the size you wanted for your container (for instance 300×300), with overflow:hidden
2. Append to this div a draggableContainer that will be the real container in the draggable sense. This second div has to be large enough to contain your draggable.
3. append to this draggableContainer your draggable draggable, let’s say 500×500
4. Adjust the size and position of draggableContainer according to the size of the two others. In this case, in order to allow panning on the whole draggable, it will need to be 700x700 with a -200x-200 offset

You can see a complete working example here.