Div选择开关

Question

所以基本上我想制作一组可以选择的div。如果单击 div 并移动鼠标，它将对所有选定的 div 执行某些操作。

我想先用 1 div 个选项进行测试，但我遇到了问题。如果我单击并快速移动鼠标，它会将光标更改为 no-drop，除非我再次单击，否则该功能不会执行。

代码如下：

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>

Answer 1

我认为取消盒子上的拖动事件似乎可行？

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);
  box.addEventListener("dragstart", dragStart);
};
//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 dragStart(e) {
  e.preventDefault();
  return false;
}

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>

Div选择开关

Div selection switch

javascript

selection