13

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í: Idea visual

Un saludo y gracias de antemano

1
  • Como lo veo, y pensándolo como a la rápida, tendría que sea una combinación de eventos, o sea, en primera instancia usar mousedown para que se te diga que se está en condición de "colorear", y una vez en ese estado, usar un evento tipo mouseenter de jQuery para que detecte los elementos por los que se está pasando en la tabla. Commented el 28 feb. 2018 a las 17:10

4 respuestas 4

10

Te dejo esta solución que hice usando las funciones mousedown que se activa cuando haces click y uso una variable (IsClickDown ) que me dice que esta haciendo click (no suelta el boton) pinta por defecto el td en donde hiciste el evento , uso también mouseenter para ver la acción de que el puntero ingresa al cuadrado validando si se esta haciendo click o no. Por ultimo la función mouseup cambia el estado de IsClickDown y remueve el atributo class que agregue para pintar los elementos td. Agregue adicionalmente una validacion para evitar que se ejecute la funcion de arrastre del td. Recuerda que las funciones de mousedown y mouseup solo seran efectuadas cuando se haga dentro del elemento table.

$(() => {

    var IsClickDown = false;

    $('table').mousedown(function(event) {
       IsClickDown = true;
       let selected = $(event.target);
       selected.addClass("obstacle");
    });
    $('table').on("dragstart",function(event) {
       event.preventDefault();   
    });
    
    $("td").mouseenter(function(event){
       if(IsClickDown) 
       {
         let selected = $(event.target);
         selected.addClass("obstacle");
       }
    });
    
    $('table').mouseup(function(event) {
       IsClickDown = false;
       $("table td").removeClass("obstacle");
    });
    
    
})
table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}

.foo {
  background-color: steelblue;
}
<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>

1
  • Perfecto !Muchas gracias!
    – mperez
    Commented el 28 feb. 2018 a las 19:47
2

Puedes utilizar los métodos mousedown y mousemove para poder moverte a través de las celdas de la tabla y poder colorearlas mientras el ratón está pulsado, y utilizar el evento mouseup para quitar la clase obstacle a todos los elementos td cuando sueltas el ratón.

Utilizo una variable booleana seleccionado la cual me va a permitir detectar si el ratón está pulsado o no. Además, también controlo si el elemento tiene ya la clase para no volvérsela a asignar en caso de que tenga pulsado el ratón.

Tu ejemplo modificado:

$(() => {
    var seleccionado = false;
    
    $('table').on("mousedown", "td", (event)=> {
       seleccionado = true;
    });
    
    $('table').on("mousemove", "td", (event)=> {
       let selected = $(event.target);
       if(seleccionado == true && !$(event.target).hasClass("obstacle")){
        selected.toggleClass("obstacle");
       }
    });
    
    $(document).on("mouseup", function(){
       seleccionado = false;
       $("td").removeClass("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>

0

Como estás usando jQuery, una solución es usar su evento mousedown:

$("table").mousedown(function(event){
   // Contenido de la función que se ejecuta al gatillar el evento
});

Abajo lo puedes ver en acción. Además de los cambios a tu código, añadí a tu hoja de estilos una clase que se aplica a tus elementos cuando se gatilla ese evento.

$(() => {
    $('table').on("click", "td", (event)=> {
       let selected = $(event.target);
       selected.toggleClass("obstacle");
    });
    
    $("table").mousedown(function(event){
       let selected = $(event.target);
       selected.toggleClass("foo");
    });
})
table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}

.foo {
  background-color: steelblue;
}
<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>

Véase también: jQuery mousedown() Method (en inglés)

1
  • ¡Gracias por la respuesta! Miré mouseDown pero no es exactamente lo que estoy buscando. He actualizado la pregunta principal con una idea visual de lo que busco.
    – mperez
    Commented el 28 feb. 2018 a las 16:56
0

Efectivamente, hay que escuchar básicamente tres eventos del Mouse , el primero es mousedown() que se lanza cuando se presiona el botón del mouse, el segundo es mouseover para escuchar cuando pase el ratón por los td de su tabla y el último mouseup cuando se suelta el botón del mouse.

//Bandera para saber si se mantiene presionado el mouse
var mousePresionado = false;
$("table td").mousedown(function () {
  mousePresionado = true;
  //si se presiona el, añadimos la clase si no la tiene
  $(this).toggleClass("obstacle");
  //evitar que se señale el td y su contenido
  return false;
}) .mouseover(function () {
   //si está presionado
  if (mousePresionado) {
    $(this).toggleClass("obstacle");
  }
})

 //cuando se suelta el botón reiniciamos 
 // y eliminamos la clase
$('table td').mouseup(function () {
    mousePresionado = false;
    $('table td').removeClass('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>

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.