Html Javascript + 鼠标点击按住事件

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>