How to click and drag a large view like in google maps?

Issue

Suppose I have a large view with scroll in both x and y direction and instead of scrolling with mouse scroll, I need to drag and move to navigate through the entire view like in google maps

<div id="wrapper">
  <div id="dragable_content">
    <img src="https://geology.com/world/world-map.gif" style="height:100rem;"/>
  </div>
</div>

how do I achieve this? preferably using only pure js

Solution

Thanks to the solution provided by @grisuu in the comments

I was able to whip up this:

jsfiddle

var _startX = 0;
var _startY = 0;
var _offsetX = 0;           
var _offsetY = 0;
var _dragElement;
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

function OnMouseDown(event){
  document.onmousemove = OnMouseMove;
    _startX = event.clientX;
  _startY = event.clientY;
  _offsetX = document.getElementById('div1').offsetLeft;
  _offsetY = document.getElementById('div1').offsetTop;
  _dragElement = document.getElementById('div1');

}

function OnMouseMove(event){
    _dragElement.style.left = (_offsetX + event.clientX - _startX) + 'px';
  _dragElement.style.top = (_offsetY + event.clientY - _startY) + 'px';
}

function OnMouseUp(event){
  document.onmousemove = null;
  _dragElement=null;
}

html{ 
  background-color:green;
  overflow: hidden;
}


.div1{position:absolute; height:500px; width: 500px; z-index:1;}

<div class="div1" id="div1">

    <div style="height:50px;width:50px;background-color:red;"></div>
    <div style="position:absolute;top:75px;left:100px;height:50px;width:50px;background-color:blue;"></div>

  </div>

Answered By - cakelover