JSFiddle - React, Tailwind, and code Playground

by robertofrega

HTML

<div id="range">
    <div id="containment">
        <img src="http://img1.loadtr.com/k-483417-Map_of_the_World.gif" id="map" />
    </div>
</div>

CSS

#range {
    width:400px;
    height:400px;
    overflow:hidden;
    border:1px solid black;
    position: relative;
}
#containment {
 position: absolute;   
}
#map {
 position: absolute;
cursor: move;    
}

JavaScript

jQuery(document).ready(function() {
    $("#containment").width(($("#map").width() * 2 - $("#range").width()));
    $("#containment").height(($("#map").height() * 2 - $("#range").height()));
    $("#containment").css({
        'left': -(($("#map").width() - $("#range").width())),
        'top': -(($("#map").height() - $("#range").height()))
    });
    jQuery("#map").draggable({
        containment: "#containment"
    });
});