JSFiddle - React, Tailwind, and code Playground

by crisply

HTML

<label id="lbl_select"></label>
<input type='button' id="btn_add" value='Add box' />
<input type='button' id="btn_getCoord" value="Get Coornination" />
<div id="factory">    
    <div class="line draggable resizable"
        style="left:0px; top:0px; width:200px; height:300px"
        type="line" id="line_1">
        
        <div class="rack draggable resizable"></div>

        <div class="robot robot_green draggable"
            type="robot" id="green">
        </div>

        <div class="robot robot_yellow draggable"
            type="robot" id="yellow">
        </div>

        <div class="robot robot_red draggable"
            type="robot" id="red">
        </div>

        <div class="robot robot_gray draggable"
            type="robot" id="gray">
        </div>

    </div>
</div>

CSS

/* Back ground*/
#factory {
    position: relative;
    background-color: lavender;
    z-index: 1;
    
    width: 1000px;
    height: 600px;
    
    border: dashed 1px red;
}

.line {
    position: absolute;
    background-color: white;
    border: solid 3px black;

    z-index: 9 !important;
}

.rack {
    position: absolute;
    background-color: skyblue;
    border: solid 1px black;

    z-index: 10 !important;
}

/* Robot Icon*/
.robot { 
    position: absolute;
    width: 27px;
    height: 27px;
    
    z-index: 100 !important;
}

.robot_green {
    background-color: green;
    background-color: yellow;
}

.robot_yellow {
    background-color: yellow;
}

.robot_red {
    background-color: red;
}

.robot_gray {
    background-color: gray;
}



/* Cursor */
.draggable {
    cursor: move;
}

.selected {
    border: dotted 1px black;
}

.resizeable {
}

JavaScript

$(document).ready(function () {
        
        $(".draggable").draggable({
            containment: "parent"
        });

        $(".resizable").resizable({
            containment: "parent",
            handles: "ne, nw, se, sw, n, w, e, s"
        });
    });

    $(document).on('mousedown', 'div.draggable', function () {
        var selectElement = $(this);
        
        $('#lbl_select').html(selectElement.attr('id'));

        // 선택 된 요소 hightlight
        //$('.draggable').each(function () {
        //    var dragElement = $(this);
        //    dragElement.removeClass("selected");
        //});
        //if (selectElement.attr("type") == "robot") {
        //    selectElement.addClass("selected");
        //}
    });

    var newIndex = 0;

    function OnClickAddRobot(s, e) {
        
        var newRobotId = 'robot_' + newIndex;

        var robotDiv = document.createElement('div');
        robotDiv.className = 'robot robot_gray draggable';
        robotDiv.id = newRobotId;
        robotDiv.style.top = 100 + 'px';
        robotDiv.style.left = 100 + 'px';
        robotDiv.style.width = 27 + 'px';
        robotDiv.style.height = 27 + 'px';
        robotDiv.setAttribute('type', 'robot');

        $('#factory').append(robotDiv);


        $('#' + newRobotId).draggable({
            containment: "parent"
        });

        newIndex++;        
    }

    function OnClickAddLine(s, e) {
        var newLineId = 'line_' + newIndex;

        var lineDiv = document.createElement('div');
        lineDiv.className = 'line draggable resizable';
        lineDiv.id = newLineId
        lineDiv.style.top = 0 + 'px';
        lineDiv.style.left = 0 + 'px';
        lineDiv.style.width = 100 + 'px';
        lineDiv.style.height = 200 + 'px';
        lineDiv.setAttribute('type', 'line');

        $('#factory').append(lineDiv);

        $('#' + newLineId).draggable({
            containment: "parent"
        });
        $('#' + newLineId).resizable({
           ...