JSFiddle - React, Tailwind, and code Playground

by crisply

HTML

<div id="div_imgPart" class="canvas">

</div>

CSS

/* Show Part Area */
    .canvas {
        position: absolute; 
        left: 0px; 
        top: 0px; 
        width: 500px; 
        height: 500px; 
        border: 1px dotted cyan;
    }

    .SideAreaDiv {
        position: absolute;
        border: 1px dotted black;
        cursor: move;

        text-align: center;
        vertical-align: middle;

        font: 18px tahoma;
        color: rgba(0, 0, 0, 0.5);
        background: rgba(255, 102, 0, 0.3);
    
        left: 200px;
        top:200px;
        width: 100px;
        height: 150px;
    }

    .RoofAreaDiv {
        position: absolute;
        border: 1px dotted black;
        cursor: move;

        text-align: center;
        vertical-align: middle;

        font: 18px tahoma;
        color: rgba(0, 0, 0, 0.5);
        background: rgba(51, 204, 51, 0.3);
    
        left: 100px;
        top:100px;
        width: 100px;
        height: 100px;
    }

    .WorstPart {
        position: absolute;
        background: rgba(255, 0, 0, 0.3);
    }

JavaScript

var canvas = $("#div_imgPart");

var sideDiv = document.createElement('div');
sideDiv.className = 'SideAreaDiv';
sideDiv.id = 'SideAreaDiv';
sideDiv.style.top = partArea.side_y * scale + 'px';
sideDiv.style.left = partArea.side_x * scale + 'px';
sideDiv.style.width = partArea.side_width * scale + 'px';
sideDiv.style.height = partArea.side_height * scale + 'px';
sideDiv.innerText = "Side";
canvas.append(sideDiv);
$(sideDiv).draggable({ containment: "parent" });
$(sideDiv).resizable({
	containment: "parent",
	handles: "ne, nw, se, sw, n, w, e, s"
});

var roofDiv = document.createElement('div');
roofDiv.className = 'RoofAreaDiv';
roofDiv.id = 'RoofAreaDiv';
roofDiv.style.top = partArea.top_y * scale + 'px';
roofDiv.style.left = partArea.top_x * scale + 'px';
roofDiv.style.width = partArea.top_width * scale + 'px';
roofDiv.style.height = partArea.top_height * scale + 'px';
roofDiv.innerText = "Roof";
canvas.append(roofDiv);
$(roofDiv).draggable({ containment: "parent" });
$(roofDiv).resizable({
	containment: "parent",
	handles: "ne, nw, se, sw, n, w, e, s"
});