Edit in JSFiddle

// USE DISABLETEXTSELECT.JS -> http://code.jdempster.com/


// Load when page is ready
(function( $ ){
    // Some settings -> div-variables
    var settings = {
      'ContentFrameSelector'        : '#contentframe',
      'SelectionSelector'           : '#selector'
    };
    
    // methods
    var methods = {
    init : function( options ) { if ( options ) {$.extend( settings, options );}},
    // Rectangle Selection Method
    bindSelectRectangle : function ( e ){
        // Bind all events to RSEL Methods
        $(settings.ContentFrameSelector).on("mousedown", RSEL.mousedown , e);
        $(settings.ContentFrameSelector).on("mouseup",   RSEL.mouseup, e);
        $(settings.ContentFrameSelector).on("mousemove", RSEL.mousemove, e);
        $(settings.SelectionSelector).on("mousemove",    RSEL.mousemove , e);
        $(settings.SelectionSelector).on("mouseup",      RSEL.mouseup ,e);
        $(settings.SelectionSelector).on("mousedown",    RSEL.mousedown ,e);
    }
  };      

    // EEPG SELECT RECTANGLE
    var RSEL = {
        // Mousebuttonstate
        'StateMousedown' : false,'StateMouseup' : false,
        // Position of the mouse
        'x1' : 0, 'x2' : 0, 'y1' : 0, 'y2' : 0,
        //Position of the div
        'top' : 0, 'left' : 0, 'width' : 0, 'height' : 0,
        
        // Mousedown Event
        mousedown : function (e) {
            // Hide the Rectangle (show on mouse move first)
            $(settings.SelectionSelector).hide();
            // Set Mousebutton state
            RSEL.StateMousedown = true;
            RSEL.StateMouseup = false;
            // Set x&y position of mouse
            RSEL.x1 = e.pageX;
            RSEL.y1 = e.pageY;
        },
        mouseup : function (e) {
            // Set Mousebutton state
            RSEL.StateMousedown = false;
            RSEL.StateMouseup = true;
            // Hide the rectangle on mouse up
            $(settings.SelectionSelector).hide();
        },
        mousemove : function (e) {
            if ( RSEL.StateMousedown ){
                // Set X2&Y2 position to calc width & height of rectangle
                RSEL.x2 = e.pageX;
                RSEL.y2 = e.pageY;
                // calculate position and width of the rectangle
                RSEL.top = (RSEL.y1 < RSEL.y2) ? RSEL.y1 : RSEL.y2;
                RSEL.left = (RSEL.x1 < RSEL.x2) ? RSEL.x1 : RSEL.x2;
                RSEL.width = (RSEL.x1 < RSEL.x2) ? RSEL.x2 - RSEL.x1 : RSEL.x1 - RSEL.x2;
                RSEL.height = (RSEL.y1 < RSEL.y2) ? RSEL.y2 - RSEL.y1 : RSEL.y1 - RSEL.y2;

                // set the rectangle  div
                $(settings.SelectionSelector).css(
                    {position: 'absolute',zIndex: 5000,
                     left: RSEL.left,top: RSEL.top,width: RSEL.width,height: RSEL.height}
                );
                // show rectangle div
                $(settings.SelectionSelector).show();
            }
        }
    };
   
// Rectangle Main Function!
  $.fn.rect= function( method ) {
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.eepg' );
    }    
  };

})( jQuery );

// Initialize the rectangle function
$("#contentframe").rect("bindSelectRectangle");
$('div').disableTextSelect();

CLICK AND DRAG INSIDE
<div id="contentframe" class="contentframe" style="height:400px;width:400px;background-color:#444;padding:10px;">
<div id="selector" class="selectiondiv"></div>    
</div>
    

.selectiondiv{
    border:1px dashed black;
    background:#D9FF00;
    opacity:0.4;
    filter:alpha(opacity=40);
    margin:0px;
    padding:0px;
    display:none;
}