Test mouse select

by BeNdErR

HTML

<div id="ghost"></div>
<div unselectable="on" onselectstart="return false;">
asdfas
fga
sf
sdf
asdf
asf
asf
    
</div>

CSS

#test {
    width: 300px;
    height: 300px;
    background: red;
}
#ghost {
    position: absolute !important;
    display: none;
    z-index: 9000;
    background: rgba(184, 231, 239, 0.49);
    border: 1px solid rgba(97, 220, 242, 0.71);
}

JavaScript

var mouseDown = false;
var startX = undefined;
var startY = undefined;
var ghost = document.getElementById("ghost");
document.addEventListener("mousedown", function (e) {
    mouseDown = true;
    startX = e.clientX;
    startY = e.clientY;

    ghost.style.width = "0px";
    ghost.style.height = "0px";

    ghost.style.display = "block";
    console.log(startX + " - " + startY);
});
document.addEventListener("mousemove", function (e) {
    if (mouseDown) {
        var currentX = e.clientX;
        var currentY = e.clientY;

        if (currentX > startX) {
            ghost.style.left = startX + "px";
        } else {
            ghost.style.left = currentX + "px";
        }
        if (currentY > startY) {
            ghost.style.top = startY + "px";
        } else {
            ghost.style.top = currentY + "px";
        }
        ghost.style.width = Math.abs(currentX - startX) + "px";
        ghost.style.height = Math.abs(currentY - startY) + "px";
        
    }
});
document.addEventListener("mouseup", function (e) {
    mouseDown = false;
    startX = undefined;
    startY = undefined;

    ghost.style.display = "none";
});