Drawing box for drawing boxes

Lets you draw boxes.

HTML

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

<!-- Unrelated code starts here-->
<div id="instruction">Start by clicking and dragging with your mouse.</div>

CSS

body, html, #drawingArea {
    width: 100%;
    height: 100%;
}

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


/**** Styling ****/

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

.drawnBox.current {
    background: transparent;
    border: 1px dashed #000;
}

.drawnBox.last {
    background: #F9FF5B;
}


/***** Extra styling *****/

#drawingArea { 
    position: realtive;
    z-index: 1;
    background: #fff;
    opacity: .7;
}

#instruction {
    width: 100%:
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    font-size: 20px;
    text-align: center;
    margin-top: 100px;
}

JavaScript

var dp = $('#drawingArea');

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

var draw = false;

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

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

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

        }

        if ( !draw && dpCurrent.length > 0 ) {

            dpCurrent.css({
                top: pageY,
                left: pageX
            });
        }
        
        if ( draw ) {
            dpCurrent.css( drawCSS );
        } 
   ...