JSFiddle - React, Tailwind, and code Playground

HTML

<div class="map">
    <div class="map-background"></div>
</div>

CSS

.map {
	border: 1px solid #888;
	width: 500px;
	height: 500px;
	margin: auto;
	margin-top: 50px;
	cursor: move;
	overflow: hidden;
}
.map-background {
    display:block;
    position: relative;
	background: url('http://image.noelshack.com/fichiers/2013/25/1371822754-map.jpg'); 
	height: 1407px;
	width: 1407px;
}

JavaScript

var ox     = $(".map").parent().offset().left;
    var oy     = $(".map").parent().offset().top;
 
    // combien de x PX Ă  le border du parent?
    var border = 1;
$( ".map-background" ).draggable({ 
        containment: [
            -($('.map').width()-$('.map-container').width()-border) + ox,
            -($('.map').height()-$('.map-container').height()-border) +oy,
            ox,
            oy
        ],
        scroll: false
    });