JSFiddle - React, Tailwind, and code Playground

by mnstrsound

HTML

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

CSS

#cropBlock {
	width: 100px;
	height: 100px;
	position: absolute;
	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;
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 = event || 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) {
	cropBlock.style.width = startWidth + e.clientX - startX + "px";
	cropBlock.style.height = startHeight + e.clientX - startX + "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) {
	cropBlock.style.top = startTop + e.clientY - startY + 'px';
	cropBlock.style.left = startLeft + e.clientX - startX + 'px';
	cropBlock.style.backgroundPosition = '-' + cropBlock.style.left + ' -' + cropBlock.style.top;
}
function stopDrag(e) {
	document.documentElement.removeEventListener('mousemove', doDrag, false);
	document.documentElement.removeEventListener('mouseup', stopDrag, false);
}