Question

Here’s the page I’m working on: http://kylemorgan49.com/sb/gridster/

When you hover over a box the background changes color (from css :hover)
and when you click javascript changes the color to red.
So after playing with this, you could imagine that this could be used as a drawing app. So how would I make it change color as you click and drag across multiple boxes? So that you don’t have to click each and every box. Thanks! Oh and you can view code by right clicking and click view source (fyi)

Answer 1

1. Bind a mousedown event on your grid to set a “clicking” flag
2. Bind a mouseenter event on each grid square. If the mouse enters and “clicking” is true, colour it
3. Bind a mouseup event on your grid to clear the “clicking” flag

e.g

var clicking = false;

// the user is holding the mouse button down, so we want to draw as they move over squares
$('#grid').mousedown(function(e) {
    clicking = true;

// the user has released the mouse, we don't want to draw anymore
}).mouseup(function(e) {
    clicking = false;
});

// when the user hovers a box, check if the user is holding down the mouse and drawing
$('#grid .box').mouseenter(function(e) {
    if (clicking) {
        $(this).addClass('colour');
    }
});