Draggable Map Area

HTML

<div id="frame">
    
    <div id="map"></div>
    
</div>


<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

CSS

#frame {
    width: 300px;
    height: 300px;
    background: yellow;
    overflow: hidden;
}

#map {
    background: url("https://www.lib.utexas.edu/maps/world_maps/txu-oclc-264266980-world_pol_2008-2.jpg");
    background-position: -1500px -500px;
    width: 6972px;
    height: 3880px;
    cursor: move;
}

JavaScript

$("#map").draggable();