Estoy intentando cambiar de color los elementos, cambiando su clase, mientras se mantenga pulsado el mouse, dando efecto de "pintar". Haciendolo por clicks del ratón lo tengo, aquí os dejo el código:
$(() => {
$('table').on("click", "td", (event)=> {
let selected = $(event.target);
selected.toggleClass("obstacle");
});
})
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 2px solid black;
cursor: pointer;
}
.obstacle {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
¿Conoceis algún modo de poder cambiar el estilo al tener pulsado el ratón? Sin tener que hacer tantos clicks como cambios se quiera.
He intentado con eventos como OnMouseDown y demás, pero no soy capaz de encontrar el modo.
La idea es mientras se tenga presionado el ratón, hacer algo así:
Un saludo y gracias de antemano
mousedown
para que se te diga que se está en condición de "colorear", y una vez en ese estado, usar un evento tipomouseenter
de jQuery para que detecte los elementos por los que se está pasando en la tabla.