JSFiddle - React, Tailwind, and code Playground

by Paul Sijpkes

HTML

<div id='johari'>
<div class='box' id='b1'></div>
<div class='box' id='b2'></div>
<div class='box' id='b3'></div>
<div class='box' id='b4'></div>
<!-- <div class='handle'></div> -->

</div>

CSS

.box {
	width: 196px; height: 196px; float: left; 
	min-width: 9px; max-width: 381px; min-height: 9px; max-height: 381px;
}
.box#b1 {
	border: 1px solid black;
}
.box#b2 {
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
.box#b3 {
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
.box#b4 {
	border-bottom: 1px solid black;
	border-right: 1px solid black;
}
.handle {
	/*visibility: hidden;*/
	min-width: 40px;	
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	display: block;
	position: absolute;
	left: 176px;
	top: 176px;
	background-color: red;
}
#johari {
	max-width: 398px; 
	max-height: 398px; 
	overflow: hidden;
}
</style>

JavaScript

$(document).ready(function() {
var defx = 208;
var defy = 208;

var b1y = $('#johari > #b1').height();
var b2y = $('#johari > #b2').height();
var b3y = $('#johari > #b3').height();
var b4y = $('#johari > #b4').height();
		
var b1x = $('#johari > #b1').width();
var b2x = $('#johari > #b2').width();
var b3x = $('#johari > #b3').width();
var b4x = $('#johari > #b4').width();

var minHeight = 9;
var minWidth = 9;
var maxHeight = 381;
var maxWidth = 381;


$('#johari').on('mousedown', function(e) {
	$('#johari').on('mousemove', function(e) {
		var x = e.clientX;
		var y = e.clientY;
		
		var b1height = b1y + (y - defy);
		b1height = b1height < minHeight ? minHeight : b1height > maxHeight ? maxHeight : b1height;  
		
		var b2height = b2y + (y - defy);
		b2height = b2height < minHeight ? minHeight : b2height > maxHeight ? maxHeight : b2height;
		
		var b3height = y < defy ? b3y + Math.abs(y - defy) : b3y + (defy - y);
		b3height = b3height < minHeight ? minHeight : b3height > maxHeight ? maxHeight : b3height;
		
		var b4height = y < defy ? b4y + Math.abs(y - defy) : b4y + (defy - y);
		b4height = b4height < minHeight ? minHeight : b4height > maxHeight ? maxHeight : b4height;
		
		var b1width = b1x + (x - defy);
		b1width = b1width < minWidth ? minWidth : b1width > maxWidth ? maxWidth : b1width;
		
		var b2width = x < defx ? b2x + Math.abs(x - defx) : b2x + (defx - x);
		b2width = b2width < minWidth ? minWidth : b2width > maxWidth ? maxWidth : b2width;
		
		var b3width = b3x + (x - defx);
		b3width = b3width < minWidth ? minWidth : b3width > maxWidth ? maxWidth : b3width;
		
		var b4width = x < defx ? b4x + Math.abs(x - defx) : b4x + (defx - x);
		b4width = b4width < minWidth ? minWidth : b4width > maxWidth ? maxWidth : b4width;
		
		$('#b1', this).height(b1height).width(b1width);
		$('#b2', this).height(b2height).width(b2width);
		$('#b3', this).height(b3height).width(b3width); 
		$('#b4', this).height(b4height).width(b4width);
});		
});
$('#johari').on('mouseup',...