Selected rectable

HTML

<a href="#" class="nosel" onclick="alert(1);">Link</a>
<div id="select_mouse_range_display" hidden></div>

CSS

#select_mouse_range_display {
	border: 1px dotted #000;
    position: absolute;
	  z-index: 1000;
}

.nosel {
  user-select:none;
  -moz-user-select:none;
}

JavaScript

var div = document.getElementById('select_mouse_range_display'), x1 = 0, y1 = 0, x2 = 0, y2 = 0;

function reCalc() {
		var s = div.style;
    var x3 = Math.min(x1,x2);
    var x4 = Math.max(x1,x2);
    var y3 = Math.min(y1,y2);
    var y4 = Math.max(y1,y2);
    s.left = x3 + 'px';
    s.top = y3 + 'px';
    s.width = (x4 - x3) + 'px';
    s.height = (y4 - y3) + 'px';
}

onmousedown = function(e) {

  window.onmousemove = function(e) {
      x2 = e.pageX;
      y2 = e.pageY;
      reCalc();
    return false;

  };

/*
	setTimeout(function() {
      div.hidden = 0;
    }, 150); */
		div.hidden = 0;
    x1 = x2 = e.pageX;
    y1 = y2 = e.pageY;
    reCalc();
	/*
	setTimeout(function() {
      document.onclick(e);
    }, 150);*/
	
};


onmouseup = function(e) {

	
	window.onmousemove=null;

	/*
	setTimeout(function() {
      if ( div.hidden == 0 ) select_mouse_range( div );
	  div.hidden = 1;
    }, 100);
	
	setTimeout(function() {
      div.hidden = 1;
    }, 200);
	*/
	div.hidden = 1;
};