console
{
document.addEventListener('mousedown', e=>{
let strPos = {
x: e.pageX,
y: e.pageY
};
let oDiv = document.createElement('div');
document.body.appendChild(oDiv);
let move = e=>{
let nowPos = {
x:e.clientX,
y:e.clientY
};
let size = {
w: Math.abs(nowPos.x - strPos.x),
h: Math.abs(nowPos.y - strPos.y)
};
oDiv.className = 'draw-div';
oDiv.style.top = Math.min(strPos.y, nowPos.y) + 'px';
oDiv.style.left = Math.min(strPos.x, nowPos.x) + 'px';
oDiv.style.width = size.w + 'px';
oDiv.style.height = size.h + 'px';
};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', function(){
document.removeEventListener('mousemove', move);
}, {once: true});
});
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
.draw-div {
position: absolute;
border: 1px solid #000;
}