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>