JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<html>
    <body>
        <div id = 'clickMe'>
            click here
        </div>
        <div id = 'work'>
            draw here
        </div>
    </body>
</html>

CSS

#work {
    border:1px solid black;
    height:500px;
    width:500px;
}
#clickMe {
    border:1px solid blue;
    height:50px;
    width:50px;
}

JavaScript

$.fn.createBox = function(id) {
        var ctr = 0;
        
        $(id).css({ cursor:'crosshair' })
             .click(function(e) {
                if (ctr == 0) {
                    var clickLocX = e.pageX,
                        clickLocY = e.pageY;
                    
                    $('<div>').attr({
                        'class':'newBox'
                    })
                    .css({
                        top:clickLocY,
                        left:clickLocX
                    })
                    .appendTo(id);
                    
                    ctr = 1;
                
                    if (ctr == 1) {
                        $(id).mousemove(function(e){
                            var XpageCoord = e.pageX;
                            var YpageCoord = e.pageY;
                                window.Xloc = XpageCoord;
                                window.Yloc = YpageCoord;
                            var boxOffset = $('.newBox').offset();
                            var boxHeight = YpageCoord - boxOffset.top; 
                            var boxWidth = XpageCoord - boxOffset.left;
                //            var boxHeight = id.height() - offsetY;
                //            var boxWidth = id.width() - offsetX;
                            $('.newBox').css({
                                height:boxHeight + 'px',
                                width:boxWidth + 'px'
                            });
                            ctr = 2;
                        });
                    }
                }
                else if (ctr == 2) {
                    $('.newBox').remove();
                    $('#work_area').css({
                        cursor: 'default'
                    });
                }
                else {
                    $.noop();
                }
            });
    }