<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
#line{
position: absolute;
width: 0px;
height: 0px;
background: rgba(0,90,255,0.25);
border: 1px solid rgba(0,114,255,0.5);
box-sizing: border-box;
}
</style>
<script>
window.onload = function() {
var target = document.getElementById("line");
document.onmousedown = function(e) {
if(e.which > 1) return;
var x = e.pageX;
var y = e.pageY;
document.onmousemove = function(e) {
target.style.width = Math.abs(e.pageX - x) + "px";
target.style.height = Math.abs(e.pageY - y) + "px";
target.style.left = (e.pageX < x ? e.pageX : x) + "px";
target.style.top = (e.pageY < y ? e.pageY : y)+ "px";
};
return false
};
document.onmouseup = function() {
target.style.width = 0 + "px";
target.style.height = 0 + "px";
document.body.style.cursor = "auto";
document.onmousemove = null;
}
};</script>
</head>
<body>
<div id="line"></div>
</body>
</html>