JSFiddle - React, Tailwind, and code Playground

HTML

<button>Click Me</button>
<div id="master_container">
    <div id="map_container">
        <img id="draggableElement" src="http://www.theodora.com/maps/new9/time_zones_4.jpg"/>
    </div>  
</div>

CSS

#map_container{
    position: relative;
    margin: 0 auto;
    left: -120px;
    width: 740px;
    height: 400px;
    top: 300px;
    overflow: hidden;
    background-color: #fafafa;
    z-index: 999;
}

#draggableElement {
    position:absolute;
    cursor: pointer;
    left: -10px;
    top: 0;
    z-index: 999;
}

#master_container{
    position: relative;
    width: 500px;
    margin: 0 auto;
    z-index: -1;
}

JavaScript

var dragThis = document.getElementById('draggableElement');
   var leftEdge = dragThis.parentNode.clientWidth - dragThis.clientWidth;
   var topEdge = dragThis.parentNode.clientHeight - dragThis.clientHeight;
   var dragObj = new dragObject(dragThis, null, new Position(leftEdge, topEdge), new Position(0, 0));

var germany = new Position(-700,-800);
$("button").click(function(){
    germany.Apply(document.getElementById('draggableElement'));
});

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function Position(x, y)
{
  this.X = x;
  this.Y = y;
  
  this.Add = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X += val.X;
      if(!isNaN(val.Y))
        newPos.Y += val.Y
    }
    return newPos;
  }
  
  this.Subtract = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X -= val.X;
      if(!isNaN(val.Y))
        newPos.Y -= val.Y
    }
    return newPos;
  }
  
  this.Min = function(val)
  {
    var newPos = new Position(this.X,...