JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/js/jqueryui-editable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/css/jqueryui-editable.css">
<div id='view'>
  <img id='image' src='https://i.imgur.com/Los6tXI.jpg'>
  <div id='line'></div>
</div>

CSS

#view {
  width: 200px;
  height: 200px;
  overflow: visible;
  left: 100px;
  position: relative;
  top: 100px;
}
#line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid yellow;
  pointer-events: none;
}

#image {
  position: absolute;
  width: 400px;
  index: -1;
}

JavaScript

var image = $('#image');
var width = image.width();
var height = image.height();
var imageLeft = parseInt(image.css('left'));
var outer = $('#view');
var outerWidth = outer.width();
var outerHeight = outer.height();
var outerLeft = parseInt(outer.css('left'));

  imageLeft = parseInt(image.css('left'));
var isMousedown = false;
var mousedownX = 0;
var mousedownY = 0;
image.on('dragstart', function(event) { event.preventDefault(); });
$(document).on('mousedown', function(event) {
	mousedownX = event.screenX;
  mousedownY = event.clientY;
  isMousedown = true;
})

$(document).on('mousemove', function(event) {
	if(isMousedown) {
    var offsetX = event.screenX - mousedownX;
    var offsetY = event.clientY - mousedownY;
    //
    offsetX = Math.max(outerWidth-width, imageLeft + offsetX)
    offsetX = Math.min(0, imageLeft + offsetX)
    
    image.css('left', offsetX);
    //image.css('top', offsetY);
  }
})

$(document).on('mouseup', function(event) {
	isMousedown = false;
})