Hay que capturar el estado del ratón en el documento en vez de las celdas, para tener mayor superficie... También es necesario asignar eventos a las celdas.

JavaScript no puede saber cuándo el ratón está presionado... Para que esté presionado se tiene que cumplir dos condiciones:

- Que se haya tocado `click` anteriormente. Se asigna _1_ a una variable, en este caso la llamo `a`.

      x.addEventListener("mousedown", x => {
        a = 1
      }

- Que no se haya soltado anteriormente. A la variable se le asigna otro valor, en este caso, _0_.

      x.addEventListener("mouseup", x => {
        a = 0
      }

Se asigna el valor de `a` cuando ocurren los eventos en el `body`:

    document.body.addEventListener("mousedown",()=>a=1)
    document.body.addEventListener("mouseup",()=>a=0)

En este caso, lo que se necesita es que al tocar `click` se cambie a azul y cuando se mueve el ratón se cambie a rojo... Entonces, cuando se mueva a otra celda se cambie nuevamente a azul.

Para esto, al tocar `click`, se asigna un atributo mediante el método `setAttribute`, no importa el nombre, en este caso lo nombraré `color`, este atributo se lee mediante `getAttribute`:

    x.addEventListener("mousedown", () => {
      a = 1;
      x.setAttribute("color","blue");
      x.style.backgroundColor = x.getAttribute("color")
    })

Si la variable es _1_ y el ratón se mueve, cambia a azul, de lo contrario cambia a rojo... Se le asigna el atributo con el valor azul para que cuando salga de la celda sea azul:

    x.addEventListener("mousemove", () => {
      a && (
        x.setAttribute("color","blue")
        x.style.backgroundColor = x.getAttribute("color")
      ) || (
        x.style.backgroundColor = "red"
      )
    })

Si se suelta el ratón, cambia a rojo:

    x.addEventListener("mouseup", () => {
      a = 0;
      x.style.backgroundColor = "red"
    })

Si el ratón se sale de la celda, vuelve a su color definido en el atributo:

    x.addEventListener("mouseleave", () => {
      x.style.backgroundColor = x.getAttribute("color")
    })

Si se suelta el ratón por fuera de la ventana del navegador podría haber problemas, porque al volver a entrar a la ventana, JavaScript no puede saber si el ratón está presionado, y la variable `a` estaría en el estado que estaba cuando el ratón estaba en la ventana.

Código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    a = 0

    reiniciar = function() {
      Array.from(
        document.querySelectorAll("td")
      ).map(x => {
        x.setAttribute("color", "#80808000")
        x.style["background-color"] = x.getAttribute("color")
      })
    }

    document.body.addEventListener("mousedown",()=>a=1)
    document.body.addEventListener("mouseup",()=>a=0)

    Array.from(
      document.querySelectorAll("td")
    ).map(x => {
      x.addEventListener("mousedown", () => {
        a = 1;
        x.setAttribute("color", "blue")
        x.style.backgroundColor = x.getAttribute("color")
      })
      x.addEventListener("mousemove", () => {
        a && (
          x.setAttribute("color", "blue"),
          x.style.backgroundColor = x.getAttribute("color")
        ) || (
          x.style.backgroundColor = "red"
        )
      })
      x.addEventListener("mouseup", () => {
        a = 0;
        x.style.backgroundColor = "red"
      })
      x.addEventListener("mouseleave", () => {
        x.style.backgroundColor = x.getAttribute("color")
      })
    })

<!-- language: lang-css -->

    table,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    td {
      width: 40px;
      height: 40px;
    }

<!-- language: lang-html -->

    <p>
      <button onclick="reiniciar()">Reiniciar</button>
    </p>
    <p>
      <table id="casillas">
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </p>

<!-- end snippet -->