Restricting the draggable area in jQuery UI

Question

I am trying to create a draggable area within a div. It works fine but I do not want the white space outside the draggable area and hence want to limit the area that can be

Answer 1

You can do this by wrapping the image in a container div that's twice as large as the image, minus the widnow div size, and offset by the size of the range div. That and the containment option and you should be all set.

jsFiddle example

HTML

<div id="range">
    <div id="container">
        <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg" id="map" />
    </div>
</div>

JS

jQuery("#map").draggable({
    containment: $('#container')
});

CSS

#range {
    width:400px;
    height:400px;
    overflow:hidden;
    border:1px solid black;
    position:relative;
}
#container {
    position:absolute;
    top:-800px;
    left:-1520px;
    width: 3440px;
    height: 2000px;
}
#map {
    width: 1920px;
    height: 1200px;
    top:800px;
    left:1520px;
}

The image below should give you an idea as to the size of the container relative to the image and the viewport. The viewport is the smaller square in the middle of the image with a black border and the wrapper is the larger overall rectangle. You can see the image as being moved to the extreme positions.