mouseover während mousedown

Question

Ich habe eine große Tabelle mit jeder Zelle 25x25 und ein div in jedem einzelnen. Jedes div hat die Klasse "node" und eine Hintergrundfarbe wird auf sie alle angewendet. Ich schreibe gerade einen jQuery-Code, der die Farbe jedes Divs ändert, wenn die Maus darüber fährt, während die Maustaste gedrückt ist.

Ich habe es derzeit so, es funktioniert, wenn ich die Maus über, aber ich will nur funktionieren, wenn die Maustaste gedrückt ist. Ich habe viele verschiedene Möglichkeiten ausprobiert, um es zur Arbeit zu bringen, aber bisher habe ich keinen Blick darauf geworfen, unten ist mein aktueller Code.

$(document).ready(function(){ 
    $(".node").mouseover(function(){ 
    $(this).css({background:"#333333"}); 
}); 
}); 

Answer 1

so etwas wie dieses Versuchen:

$(document).ready(function(){ 

    var isDown = false; // Tracks status of mouse button 

    $(document).mousedown(function() { 
    isDown = true;  // When mouse goes down, set isDown to true 
    }) 
    .mouseup(function() { 
    isDown = false; // When mouse goes up, set isDown to false 
    }); 

    $(".node").mouseover(function(){ 
    if(isDown) {  // Only change css if mouse is down 
     $(this).css({background:"#333333"}); 
    } 
    }); 
}); 

---

EDIT:

Sie können einen separaten mousedown auf .node für einzelne Artikel Auswahlen zu tun.

$('.node').mousedown(function() { 
    $(this).css({background:"#333333"}); 
    }); 

---

EDIT:

Hier ist eine alternative Methode bind und unbind verwenden.

$(document).mousedown(function() { 
     $(".node").bind('mouseover',function(){ 
      $(this).css({background:"#333333"}); 
     }); 
    }) 
    .mouseup(function() { 
    $(".node").unbind('mouseover'); 
    }); 

    $('.node').mousedown(function() { 
    $(this).css({background:"#333333"}); 
    }); 

Answer 2

Nun, wenn die Maustaste geht, ändert den Hintergrund, und wenn nach oben geht, ändert sich zurück ...

$(".node").mouseup(function(){ 
    $(this).css({background:'#cccccc'}); 
}).mousedown(function(){ 
    $(this).css({background:'#333333'}); 
}); 

Ist das, was Sie suchen?

Erfahren Sie mehr in http://api.jquery.com/mousedown/