jquery - マウスダウン中のマウスオーバー

Question

各セルが25x25で、各セル内にdivがある大きなテーブルがあります。各 div には「ノード」というクラスがあり、それらすべてに背景色が適用されます。私は、マウスボタンが押されている間にマウスが上に移動すると、各divの色を変更するjQueryコードを作成中です。

私は現在それを持っているので、マウスオーバーすると機能しますが、マウスボタンが押されたときにのみ機能したいです。私はそれを機能させるためにさまざまな方法を試しましたが、これまでのところ私は見ていません.以下は私の現在のコードです.

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

Answer 1

次のようなことを試してください：

$(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"});
    }
  });
});

---

編集：

個々のアイテムの選択に対して個別mousedownに実行することをお勧めします。.node

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

---

編集：

Here's an alternative method using bind and unbind.

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

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