JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="drawingArea"></div>

CSS

.drawnBox {
    border: 1px solid #222;
    background: #e1e1e1;
    opacity: 0.5;
}



.drawnBox {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

#drawingArea {
    width: 500px;
    height: 500px;
    border: 1px solid #111;
}

JavaScript

var dp = $('#drawingArea');

    dp
     .css({ position: 'relative' })
     .on("mousemove mousedown mouseup", draw_a_box );

    draw = false;
    changeDir = true;

function draw_a_box( e ) {
    
    var pageX = e.pageX,
        pageY = e.pageY,
        dpLast = dp.find('.drawnBox.last'),
        dpLast_data = dpLast.data();
    
    if ( e.type === 'mousemove' ) {
        
        
        // If drawnBox doesn't exist, create it.
        if ( dpLast.length < 1 ) {
            $('<div class="drawnBox last"></div>').appendTo( dp );
        }
        
        var drawCSS = {};

        // If drawing is initiated.
        if ( draw ) {

            // Determine the direction.
            
            // xLeft
            if ( dpLast_data.pageX > pageX ) {
                changeDir = true,
                drawCSS['right'] = dp.width() - dpLast_data.pageX,
                drawCSS['left'] = 'auto',
                drawCSS['width'] = dpLast_data.pageX - pageX;
            }
            // xRight
            else if ( dpLast_data.pageX < pageX ) {
                changeDir = true,
                drawCSS['left'] = dpLast_data.pageX,
                drawCSS['right'] = 'auto',
                drawCSS['width'] = pageX - dpLast_data.pageX;
            }
            
            // yUp
            if ( dpLast_data.pageY > pageY ) {
                changeDir = true,
                drawCSS['bottom'] = dp.height() - dpLast_data.pageY,
                drawCSS['top'] = 'auto',
                drawCSS['height'] = dpLast_data.pageY - pageY;
            }
            // yDown
            else if ( dpLast_data.pageY < pageY ) {
                changeDir = true,
                drawCSS['top'] = dpLast_data.pageY,
                drawCSS['bottom'] = 'auto',
                drawCSS['height'] = pageY - dpLast_data.pageY;
            }

        }
        
        if ( !draw && dpLast.length > 0 ) {

            dpLast.css({
                top: pageY,
                left: pageX
     ...