Нажмите и перетащите на несколько делений?

Я пытаюсь создать инструмент для рисования в реальном времени, чтобы укрепить мои навыки JavaScript и node.js. У меня проблема только с частью JavaScript. На сетке 3 на 3 я хочу, чтобы, если у вас была указатель мыши и вы проходили несколько делений, другими словами, щелкали и перетаскивали, другие делители также меняли цвет.

Однако, прямо сейчас только первый div, на котором я разместил текст, фактически изменит цвет.

Если вы посетите мой jsfiddle, http://jsfiddle.net/a5j8u6wq/

попробуйте onmousedown для нескольких блоков, и вы увидите, что он не может раскрасить блоки, кроме первого.

Как это исправить?

Спасибо

Копия того, что находится на jsfiddle, включена ниже:

HTML

  <body>
<div>
    <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 class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
  </body>

CSS

    div {
    width: 300px;
    height: 600px;
}

div div {
    width: 100px;
    height: 100px;
    outline: 1px solid;
    float: left;
}

JavaScript

    var box;
    var boxArray;
             boxArray = [];

        box = document.getElementsByClassName("box");
        for ( var i = 0; i < box.length; i++ ) (function(i){
  box[i].onmousedown = function() {
    box[i].style.backgroundColor = "green";
  }
})(i);
Источник

1 ответ

Решение

onmousedown Событие будет записано только при нажатии кнопки мыши на поле. Он проверяет, нажали ли вы кнопку мыши на этом элементе, и не проверяет, находится ли мышь в данный момент на элементе. Так что это повлияет только на окно, которое вы нажали. Ты ищешь onmousemove или же onmouseenter, затем в случае, если левая кнопка мыши нажата, это означает, что e.buttons это 1:

box[i].onmousemove = function(e) {
    if(e.buttons == 1) // If the mouse button is down
        box[i].style.backgroundColor = "green"; // draw
}

Пример скрипки

Источник
Другие вопросы по тегам