В общем, я хотел создать набор div, который можно было бы выбирать. Если щелкнуть div и переместить мышь, он что-то сделает со всеми выбранными div.
Я хотел сначала протестировать с выбором 1 div, но столкнулся с проблемой. Если я щелкнул и быстро переместил мышь, курсор изменится на «без опускания», и функция не будет выполняться, пока я не нажму еще раз.
Вот код:
boxes = document.querySelectorAll('.box');
let itemList = [];
let selectedList = [];
//I made selectedList because i want to put multiple selection later.
for (let box of boxes) {
itemList.push(box);
box.addEventListener("mousedown", mousedown);
};
//Each box listen mousedown and put into itemList.
function mousedown(e) {
item = e.target;
deselectAll(); //First, i will deselect all div if one of the divs clicked
item.selected = true; //Then, i select the div that clicked
selectedListUpdate(); //Then i update the selectedList to determine which one selected and not
window.addEventListener('mousemove', mousemove);
function mousemove(e) {
for (let item of selectedList) {
item.style.background = getRandomColor();
//This function will do something to all item in selectedList if the mouse move.
//Later, i want to change this function to function that can drag the div.
};
};
window.addEventListener('mouseup', mouseup);
function mouseup(e) {
window.removeEventListener('mouseup', mouseup);
window.removeEventListener('mousemove', mousemove);
}; //If i let go the mouse, moving mouse no longer do something but selected items are still selected
};
function selectedListUpdate() {
selectedList = itemList.filter(x => x.selected == true);
for (let x of selectedList) {
x.style.outline = "white solid 2px";
};
unselectedList = itemList.filter(x => x.selected == false)
for (let x of unselectedList) {
x.style.outline = "0";
};
}; //outline every item in selectedList
function deselectAll(e) {
for (x of itemList) {
x.selected = false;
};
selectedList = [];
}; //Reset selectedList
function getRandomColor() {
let r = Math.floor((Math.random() * 155) + 100);
let g = Math.floor((Math.random() * 155) + 100);
let b = Math.floor((Math.random() * 155) + 100);
return `rgb(${r} ${g} ${b})`;
}; //Example of function to execute when mouse is moving
body {
margin: 0px;
background: #333;
}
.box {
margin: 10px;
background: white;
width: 100px;
height: 100px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>