Изменить стиль при перетаскивании мыши над добавленным div - PullRequest
Новая
       3

Изменить стиль при перетаскивании мыши над добавленным div

0 голосов
/ 13 января 2020

Я пытаюсь создать "сетку", состоящую из div, созданных и добавленных с помощью JS, на которых, когда я перетаскиваю свою мышь над каждым div, я хочу, чтобы его стиль изменился. Нечто похожее на рисование с простыми div, без использования холста. Это возможно?

Я написал следующий код для добавления 50 элементов и использовал прослушиватели событий mouseUp () и mouseDown (). Когда я нажимаю мышью на любой элемент, изменения применяются только к первому элементу. 

var c = document.createDocumentFragment();
    for (var i = 0; i < 50; i++) {
      var e = document.createElement("div");
        e.id = "box";
        e.className = "box";
        e.addEventListener("mousedown", mouseDown);
        e.addEventListener("mouseup", mouseUp);
        c.appendChild(e);
        }
    document.getElementById('container').appendChild(c);
    
 function mouseDown() {
   document.getElementById("box").innerHTML = "DOWN";
   document.getElementById("box").style.backgroundColor = "red";
   }
 function mouseUp() {
   document.getElementById("box").innerHTML = "UP";
   document.getElementById("box").style.backgroundColor = "black";
   }
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 80px;
  height: 80px;
  background-color: #000;
  font-size: 15px;
  text-align: center;
  color: #fff;
}

.box:hover {
  background: blue !important;

}

.bg-blue {
  background: blue !important;
}
<div id="container"></div>

1 Ответ

0 голосов
/ 13 января 2020

Вы можете передать аргумент слушателю события как событие и использовать его цель для применения желаемых изменений. Как показано ниже: 

    var c = document.createDocumentFragment();
    for (var i = 0; i < 50; i++) {
    var e = document.createElement("div");
    e.className = "box";
    e.addEventListener("mousedown", mouseDown);
    e.addEventListener("mouseup", mouseUp);
    c.appendChild(e);}
    document.getElementById('container').appendChild(c);
    function mouseDown(event) {
    event.target.innerHTML = "DOWN";
    event.target.style.backgroundColor = "red";}
    function mouseUp(event) {
    event.target.innerHTML = "UP";
    event.target.style.backgroundColor = "black";}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 80px;
  height: 80px;
  background-color: #000;
  font-size: 15px;
  text-align: center;
  color: #fff;
}

.box:hover {
  background: blue !important;

}

.bg-blue {
  background: blue !important;
}
<div id="container"></div>
...