Change color of HTML elements when holding down the mouse

Navigation
11

I am trying to change the color of the elements, changing their class, while the mouse is held down, giving the effect of "painting". Doing it by mouse clicks I have it, here I leave the code: 

$(() => {
    $('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>

Do you know any way to change the style when you click on the mouse? Without having to make as many clicks as you want changes.

I've tried with events like OnMouseDown and so on, but I'm not able to find the mode.

The idea is while you have the mouse pressed, do something like this:

Greetings and thanks in advance

    
asked by mperez 28.02.2018 в 17:29
source

4 answers

8

I leave you this solution that I made using the mousedown functions that are activated when you click and use a (IsClickDown) variable that tells me that you are clicking (do not release) the button) paints by default the td where you made the event, also use mouseenter to see the action of the pointer entering the square validating if you are clicking or not . Finally the mouseup function changes the status of IsClickDown and removes the class attribute that you add to paint the td elements. Also add a validation to prevent the td drag function from executing. Remember that the mousedown and mouseup functions will only be performed when done within the table element. 

$(() => {

    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>
    
answered by 28.02.2018 / 19:05
source
2

You can use the methods mousedown and mousemove to be able to move through the cells of the table and be able to color them while the mouse is pressed, and use the event mouseup to remove the class obstacle to all the td elements when you release the mouse.

I use a boolean variable seleccionado which will allow me to detect if the mouse is pressed or not. In addition, I also check if the element already has the class so as not to reassign it in case you have clicked on the mouse.

Your modified example: 

$(() => {
    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>
    
answered by 28.02.2018 в 19:27
0

Since you are using jQuery, one solution is to use your mousedown event: 

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

Below you can see it in action. In addition to the changes to your code, I added to your stylesheet a class that applies to your elements when that event is triggered. 

$(() => {
    $('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>

See also : jQuery mousedown () Method (in English )

    
answered by 28.02.2018 в 17:46
0

Indeed, we must basically listen to three events of Mouse , the first is mousedown () that is launched when the mouse button is pressed, the second is mouseover to listen when you mouse over the td of your table and the last mouseup when you release the mouse button. 

//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>
    
answered by 28.02.2018 в 18:58
two-way bind with Select2 in aurelia.io Difference in performance when consulting with SELECT DISTINCT and GROUP BY?