Selected rectable

by Daniel Dm

HTML

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

CSS

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

JavaScript

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

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

onmousemove = function(e) {
    x2 = e.pageX;
    y2 = e.pageY;
    reCalc();
	return false;
	
};
onmouseup = function(e) {
	/*
	setTimeout(function() {
      if ( div.hidden == 0 ) select_mouse_range( div );
	  div.hidden = 1;
    }, 100);
	
	setTimeout(function() {
      div.hidden = 1;
    }, 200);
	*/
	div.hidden = 1;
};