Html Javascript + Mouse click hold event

Question

I have html and when the mouse is clicked and dragged, any intersecting boxes will be highlighted blue. On mouse up, the selection highlight disappears.

  .root {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
  }

  .row {
    display: flex;
  }

  .box {
    border: 1px solid;
    height: 100px;
    width: 100px;
  }

<div class="root">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 1

It is been a great practice for me, hope that it will helps you too.

Here is the code.

When mousedown event triggered i started listening mouseover event and when mouseup event triggered i am killing mouseover event[document] this makes buttons transparent again when mouseup event trigged.

const rootElement = document.getElementById('root');

const boxLeft = rootElement.offsetLeft;
const boxTop = rootElement.offsetTop;
const boxRight = rootElement.offsetLeft + rootElement.offsetWidth;
const boxBottom = rootElement.offsetTop + rootElement.
offsetHeight;


const boxes = document.getElementsByClassName('box');


let mouseEnterXposition;
let mouseEnterYposition;
let mouseLeaveXposition;
let mouseLeaveYposition;

let goingRight;
let goingDown;

let boxesOffSetTopArray = [];
let boxesOffSetLeftArray = [];

let minTopEnterValue = 9999;
let minLeftEnterValue = 9999;

let minLeftOutValue = 9999;
let minTopOutValue = 9999;

rootElement.addEventListener("dragstart", (e) =>{
    e.preventDefault();
})


rootElement.addEventListener("mousedown", (e) => {

    rootElement.addEventListener("mouseover", mouseOverEvent, false);

    mouseEnterXposition = e.clientX;
    mouseEnterYposition = e.clientY;

 
    for (let i  = 0; i < boxes.length; i++){
        boxesOffSetLeftArray.push(boxes[i].offsetLeft);
    }
 
    

    for (let i = 0; i < boxesOffSetLeftArray.length; i++){
        if (mouseEnterXposition > boxesOffSetLeftArray[i]){
            if (minLeftEnterValue > Math.abs(mouseEnterXposition - boxesOffSetLeftArray[i])){
                minLeftEnterValue = boxesOffSetLeftArray[i];
            }
        }
    }

    
    for (let i  = 0; i < boxes.length; i++){
        boxesOffSetTopArray.push(boxes[i].offsetTop);
    }


    for (let i = 0; i < boxesOffSetTopArray.length; i++){
        if (mouseEnterYposition > boxesOffSetTopArray[i]){
            if (minTopEnterValue > Math.abs(mouseEnterYposition - boxesOffSetTopArray[i])){
                minTopEnterValue = boxesOffSetTopArray[i];
            }
        }
    }

    
})

document.addEventListener("mouseup", () => {
    for (let i = 0; i < boxes.length; i++){
        boxes[i].style.backgroundColor = "transparent";

    rootElement.removeEventListener("mouseover",mouseOverEvent);
}});





function mouseOverEvent (e){
    mouseLeaveXposition = e.clientX;
    mouseLeaveYposition = e.clientY;

    if (mouseLeaveXposition > mouseEnterXposition){
        goingRight = true;
    }
    else{
        goingRight = false;
    }

    if (mouseLeaveYposition > mouseEnterYposition){
        goingDown = true;
    }
    else{
        goingDown = false;
    }


    for (let i = 0; i < boxesOffSetLeftArray.length; i++){
        if (mouseLeaveXposition > boxesOffSetLeftArray[i]){
            if (minLeftOutValue > Math.abs(mouseLeaveXposition - boxesOffSetLeftArray[i])){
                minLeftOutValue = boxesOffSetLeftArray[i];
            }
        }
    }


    for (let i = 0; i < boxesOffSetTopArray.length; i++){
        if (mouseLeaveYposition > boxesOffSetTopArray[i]){
            if (minTopOutValue > Math.abs(mouseLeaveYposition - boxesOffSetTopArray[i])){
                minTopOutValue = boxesOffSetTopArray[i];
            }
        }
    }

    
    for (let i = 0; i < boxes.length; i++){
        if (goingRight && goingDown){
          if (boxes[i].offsetTop >= minTopEnterValue){
            if (boxes[i].offsetLeft >= minLeftEnterValue){
                if (boxes[i].offsetTop < minTopOutValue + boxes[i].offsetHeight){
                    if (boxes[i].offsetLeft  <= minLeftOutValue){
                        boxes[i].style.backgroundColor = "blue";
                        continue;
                    }
                }
            }
          }
          boxes[i].style.backgroundColor = "transparent";
        }
        else if (!goingRight && goingDown){
            if (boxes[i].offsetTop >= minTopEnterValue){
                if (boxes[i].offsetLeft <= minLeftEnterValue){
                    if (boxes[i].offsetTop < minTopOutValue + boxes[i].offsetHeight){
                        if (boxes[i].offsetLeft + boxes[i].offsetWidth > minLeftOutValue){
                            boxes[i].style.backgroundColor = "blue";
                            continue;
                        }
                        
                    }
                }
            }
            boxes[i].style.backgroundColor = "transparent";
        }
        else if (goingRight && !goingDown){
            if (boxes[i].offsetTop <= minTopEnterValue){
                if (boxes[i].offsetLeft >= minLeftEnterValue){
                    if (boxes[i].offsetTop >= minTopOutValue){
                        if (boxes[i].offsetLeft <= minLeftOutValue){
                            boxes[i].style.backgroundColor = "blue";
                            continue;
                        }
                        
                    }
                }
            }
            boxes[i].style.backgroundColor = "transparent";
        }
        else if (!goingRight && !goingDown){
            if (boxes[i].offsetTop <= minTopEnterValue){
                if (boxes[i].offsetLeft <= minLeftEnterValue){
                    if (boxes[i].offsetTop >= minTopOutValue){
                        if (boxes[i].offsetLeft + boxes[i].offsetWidth > minLeftOutValue){
                            boxes[i].style.backgroundColor = "blue";
                            continue;
                        }
                    }
                }
            }
            boxes[i].style.backgroundColor = "transparent";
        }
    }
}

html{
  font-size: 62.5%;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
}


.row {
  display: flex;
  flex-direction: row;
}

.box {
  border: 1px solid;
  height: 10rem;
  width: 10rem;

}

 <div id="root">
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>