JSFiddle - React, Tailwind, and code Playground

by Dörnesz Tamás

HTML

<div id="dxy" class="mzg6o" style="height:150px;width:150px;background-color:#EEE;">
  <div id="zaro" style="width:20px;height:20px;position:absolute;top:0px;right:0px;background-color:#AAA;cursor:pointer"></div>
  <div id="huzo" style="width:20px;position:absolute;top:20px;bottom:20px;right:0px;background-color:#EEE;cursor:move"></div>
  <div id="mret" style="width:20px;height:20px;position:absolute;bottom:0px;right:0px;background-color:#AAA;cursor:nw-resize"></div>
    <div style="width:100%; height:100%; background-color:red; ">test</div>
</div>

JavaScript

window.onload = addListeners();
var div, difx, dify, idz;

function addListeners(){
	document.getElementById('zaro').addEventListener('mousedown', zar, false);
	document.getElementById('huzo').addEventListener('mousedown', mozg1, false);
	document.getElementById('mret').addEventListener('mousedown', mret1, false);
	window.addEventListener('mouseup', mozg0, false);
	window.addEventListener('mouseup', mret0, false);
	div = document.getElementById('dxy');
  $('mzg6o').each(function(i) {
  	$(this).css({position:'absolute',resize:'both',overflow:'auto',padding-right:'20px');
  }
}

function zar(){
  div.style.display="none";
}
function mozg0(){
	window.removeEventListener('mousemove', mozg2, true);
  document.getElementById('huzo').style.backgroundColor="#EEE";
}
function mozg1(e){
	window.addEventListener('mousemove', mozg2, true);
	difx = parseInt(div.style.left) || 0;
	difx = difx - e.clientX;
	dify = parseInt(div.style.top) || 0;
	dify = dify - e.clientY;
  document.getElementById('huzo').style.backgroundColor="#FFF";
}
function mozg2(e){
	div.style.left = difx + e.clientX + 'px';
	div.style.top = dify + e.clientY + 'px';
}

function mret1(e){
	window.addEventListener('mousemove', mret2, true);
	difx = parseInt(div.style.width) || 0;
	difx = difx - e.clientX;
	dify = parseInt(div.style.height) || 0;
	dify = dify - e.clientY;
  document.getElementById('mret').style.backgroundColor="#FFF";
}
function mret2(e){
	div.style.width = difx + e.clientX + 'px';
	div.style.height = dify + e.clientY + 'px';
}
function mret0(){
	window.removeEventListener('mousemove', mret2, true);
  document.getElementById('mret').style.backgroundColor="#AAA";
}