JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div id="cropBlock">
		<span id="resizeBtn"></span>
	</div>
</div>

CSS

#cropBlock {
	width: 100px;
	height: 100px;
	position: absolute;
    border-radius: 50%;
	top: 200px;
	left: 200px;
	border: 1px solid #ccc;
	background: url('http://i641.photobucket.com/albums/uu137/R3GYZZ/lobo-cara-r-500x400.jpg');
	background-position: -200px -200px;
	background-repeat: no-repeat;
}
#resizeBtn {
	bottom: 1px;
	right: 1px;
	position: absolute;
	border: 10px solid #ff0000;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
}
#wrapper {
	width: 500px;
	height: 400px;
	background: url('http://i641.photobucket.com/albums/uu137/R3GYZZ/lobo-cara-r-500x400.jpg') center center no-repeat;
	border: 1px solid #ccc;
	position: relative;
	overflow: hidden;
}
#wrapper:before {
	position: absolute;
	content: "";
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

JavaScript

var startX, startY, startWidth, startHeight, startTop, startLeft;
var cropBlock = document.getElementById('cropBlock');
var resizeBtn = document.getElementById('resizeBtn');
var border = document.getElementById('wrapper');
resizeBtn.addEventListener('mousedown', initResize, false);
cropBlock.addEventListener('mousedown', initDrag, false);
function initResize(e) {
	e = e || window.event;
   	e.stopPropagation();
	startX = e.clientX;
	startY = e.clientY;
	startWidth = cropBlock.offsetWidth;
	startHeight = cropBlock.offsetHeight;
	document.documentElement.addEventListener('mousemove', doResize, false);
 	document.documentElement.addEventListener('mouseup', stopResize, false);
}
function doResize(e) {
    var width = startWidth + e.clientX - startX;
    width < 100 && (width = 100);
    width + cropBlock.offsetLeft > border.offsetWidth && (width = border.offsetWidth - cropBlock.offsetLeft - 4);
    /*var height = startHeight + e.clientX - startX;
    height < 100 && (height = 100);*/
    width + cropBlock.offsetTop > border.offsetHeight && (width = border.offsetHeight - cropBlock.offsetTop - 4);
    cropBlock.style.width = width + 'px';
    cropBlock.style.height = width + 'px';
}
function stopResize(e) {
	document.documentElement.removeEventListener('mousemove', doResize, false);
	document.documentElement.removeEventListener('mouseup', stopResize, false);
}
function initDrag(e) {
	startX = e.clientX;
	startY = e.clientY;
	startTop = cropBlock.offsetTop;
	startLeft = cropBlock.offsetLeft;
	document.documentElement.addEventListener('mousemove', doDrag, false);
	document.documentElement.addEventListener('mouseup', stopDrag, false);
}
function doDrag(e) {
    var left = startLeft + e.clientX - startX;
    left < 0 && (left = 0);
    left + cropBlock.offsetWidth > /*border.offsetLeft + */border.offsetWidth && (left = /*border.offsetLeft + */border.offsetWidth - cropBlock.offsetWidth - 2);
    var top = startTop + e.clientY - startY;
    top < 0 && (top = 0);
    top +...