0

Tengo una tabla, las etiquetas td tienen un atributo onclick, que realiza la acción de indicar la posición en la que está la casilla para rellenar de color. Cuando pulso cualquier casilla, esta se rellena de un color. Sin embargo, se rellena cuando el ratón finaliza el click, no cuando este es pulsado.

La pregunta es ¿como se puede hacer para que al mantener pulsado el ratón y arrastrándolo por las casillas estas se rellenen del color indicado, sin necesidad de pulsar casilla por casilla?

Otra pregunta añadida es: ¿cuál sería la forma de ahorrar código para las casillas con el atributo onclick (td), aunque este indica la posición de la casilla?

var z=0;

function rellenar(posicion) {
 document.getElementsByTagName("td")[posicion].style.backgroundColor = "blue";
}
table,  td {border:1px solid black;border-collapse:collapse;}
td{width:40px;height:40px;}
td:hover{background-color:red;}
<table id="casillas">
<tr>
<td onclick="rellenar(0)"></td>
<td onclick="rellenar(1)"></td>
<td onclick="rellenar(2)"></td>
</tr>
<tr>
<td onclick="rellenar(3)"></td>
<td onclick="rellenar(4)"></td>
<td onclick="rellenar(5)"></td>
</tr>
</table>

3
  • Con Jquery te lo tengo hecho, pero Javascript vanila ni idea =( Si te sirve jquery como respuesta dímelo ;9
    – Zander
    Commented el 4 jun. 2021 a las 12:18
  • 2
    Para ello, tendrás que jugar con los eventos que te de JavaScript de mousedown: developer.mozilla.org/es/docs/Web/API/Element/mousedown_event
    – Zander
    Commented el 4 jun. 2021 a las 12:20
  • @Zander Me sirve JQuery. Gracias Commented el 5 jun. 2021 a las 19:31

1 respuesta 1

5

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>

1
  • Funciona, pero cuando el ratón deja de ser pulsado y pasa por las celdas, estas vuelven al color original Commented el 5 jun. 2021 a las 19:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.