JSFiddle - React, Tailwind, and code Playground

by Jan Oosterhuis

HTML

<div id="x" style="top:100px; left:200px ;width:150px; height:100px;" >resize me by dragging</div>

CSS

body{background: #ddd  url(none) no-repeat scroll center center; margin:0px ; white-space:pre;}
div{
position:absolute; z-index:1;            display:block;      visibility: visible;
border-color:#ccc; border-style:solid;   border-width:1px;	
color:#000;        background:#fff  url(none) no-repeat scroll center center ;  
padding:0px;      font:normal normal normal 11px/14px arial, georgia;
text-align:left;   text-decoration:none; text-transform:none;
overflow:hidden;   cursor:default;       filter: none; }

JavaScript

PositionXY = {
	baseX : undefined,
	baseY : undefined,
	isRepositionable : true,

	detectBasePosition : function (e) {
		
		"use strict";
		PositionXY.isRepositionable = true;
		e = e || window.event;    // crossbrowser event acces
		if (this.currentStyle){   // IE
			if (e.clientX || e.clientY) {
			    PositionXY.baseX = e.clientX - this.currentStyle.width.replace(/px/,"");
		        PositionXY.baseY = e.clientY - this.currentStyle.height.replace(/px/,"");	
	        }
		} else if (window.getComputedStyle){  // Mozilla
			if (e.pageX || e.pageY) {
				PositionXY.baseX = e.pageX - document.defaultView.getComputedStyle(this,null).getPropertyValue("width").replace(/px/,"");
			    PositionXY.baseY = e.pageY - document.defaultView.getComputedStyle(this,null).getPropertyValue("height").replace(/px/,"");
			}
		}
	},
	startPositionAdjustment : function (e) {
	
	    "use strict";
	    if (PositionXY.isRepositionable) {
	    	e = e || window.event;           // crossbrowser event acces
	    	if (e.clientX || e.clientY) {    // IE
		    	this.style.width = e.clientX - PositionXY.baseX + "px";
		    	this.style.height = e.clientY - PositionXY.baseY + "px";
		    } else if (e.pageX || e.pageY) {  // Mozilla 
	    	    this.style.width = e.pageX - PositionXY.baseX + "px";
		    	this.style.height  = e.pageY - PositionXY.baseY + "px";
			}
        } else return;
	},
	stopPositionAdjustment : function () {
		
		"use strict";
		PositionXY.isRepositionable = false;	
	}
};


var elm = document.getElementById("x");
elm.onmousedown = PositionXY.detectBasePosition;
elm.onmousemove = PositionXY.startPositionAdjustment;
elm.onmouseup = PositionXY.stopPositionAdjustment;