Skip to main content
4 de 5
se añadieron 612 caracteres en el cuerpo; se añadieron 10 caracteres en el cuerpo
user avatar
user avatar

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:

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")
  })
})
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  width: 40px;
  height: 40px;
}
<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>

user13558