JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<div id="div" hidden></div>

CSS

div {
    border: 1px dotted red;
    position: absolute;
}

div .resizer {
    
}

JavaScript

var div = document.getElementById('div'),
    x1 = 0,
    y1 = 0,
    x2 = 0,
    y2 = 0;

var element;

function reCalc() {
    var x3 = Math.min(x1, x2);
    var x4 = Math.max(x1, x2);
    var y3 = Math.min(y1, y2);
    var y4 = Math.max(y1, y2);
    div.style.left = x3 + 'px';
    div.style.top = y3 + 'px';
    div.style.width = x4 - x3 + 'px';
    div.style.height = y4 - y3 + 'px';
}
onmousedown = function (e) {

    var target = $(event.target);
    x1 = e.clientX;
    y1 = e.clientY;
    var position = element ? element[0].getBoundingClientRect() : 0;

    if (element && element.find('.resizer').is(target)) {
        return;
    }

    div.hidden = 0;
    x1 = e.clientX;
    y1 = e.clientY;
    reCalc();
};
onmousemove = function (e) {
    x2 = e.clientX;
    y2 = e.clientY;
    reCalc();
};

onmouseup = function (e) {
    div.hidden = 1;

    var target = $(event.target);

    if (element && element.find('.resizer').is(target)) {
        return;
    }

    var position = element ? element[0].getBoundingClientRect() : 0;

    element = $(div).clone();

    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    element.append(resizer);
    resizer.addEventListener('mousedown', initDrag, false);

    $("body").append(element.show());
    
    element.off("mousedown")
    element.off("mouseup")

};

var startX, startY, startWidth, startHeight;

function initDrag(e) {
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(document.defaultView.getComputedStyle(element[0]).width, 10);
    startHeight = parseInt(document.defaultView.getComputedStyle(element[0]).height, 10);
    document.documentElement.addEventListener('mousemove', doDrag, false);
    document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
    element[0].style.width = (startWidth + e.clientX - startX) + 'px';
    element[0].style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
   ...