在jquery鼠標下拉事件中拖動？

Question

我的代碼是爲了有一個表，當點擊td將變成紅色。再次單擊時，td將恢復爲正常顏色。我有這個與下面列出的代碼一起工作。接下來，我想獲得它，以便如果用戶將鼠標懸停在每個td上，則他將鼠標懸停在上方將變爲紅色。我不知道如何去做這件事？當前代碼是：

<style> 
.Selected{ 
background-color :red; 
} 

</style> 

<script> 
    $(document).ready(function() { 

$('#WeekTable td').live('click', 'td', function() { 
$(this).toggleClass('Selected'); 
       }); 

$('#Which').click(function() { 
$('.Selected').each(function(index){ 
alert($(this).attr("ID")); 
}) 
       }); 

       }); 

</script> 
<table id="WeekTable" > 
<tr id="WeekRow"> 
<td value = "1" id="Week1">1</td> 
<td value = "2" id="Week2">2</td> 
<td value = "3" id="Week3">3</td> 
<td value = "4" id="Week4" >4</td> 
<td value = "5" id="Week5">5</td> 
<td value = "6" id="Week6">6</td> 
<td value = "7" id="Week7">7</td> 
<td value = "8" id="Week8">8</td> 
<td value = "9" id="Week9">9</td> 
<td value = "10" id="Week10">10</td> 
<td value = "11" id="Week11">11</td> 
<td value = "12" id="Week12">12</td> 
<td value = "13" id="Week13">13</td> 
<td value = "14" id="Week14">14</td> 
<td value = "15" id="Week15">15</td> 
</tr> 
</table> 
<button id="Which" >Which Weeks?</button> 

謝謝你們！

Answer 1

我會設置一個變量，記住鼠標當前是否被按下。

mouseIsDown = false; 

$(window).mousedown(function(){ 
    mouseIsDown = true; 
}); 

$(window).mouseup(function(){ 
    mouseIsDown = false; 
}); 

然後使用該變量在TD懸停事件回調

$("#WeekTable td").hover(function(){ 
    if(mouseIsDown) $(this).addClass("Selected"); 
}); 

對你沒有使用現場活動的點擊，只是做：

$("#WeekTable td").click(function(){ 
    $(this).toggleClass('Selected'); 
}); 

Answer 2

這裏有一條路可走關於它。您可以使用帶有jQuery的mousedown事件。設置一個全局布爾dragging這false默認情況下，並使其true當鼠標按鍵被按住了，回false時，它的發佈：

$(document).ready(function() { 
    var dragging = false; 

    $('html').mousedown(function(e){ 
     dragging = true; 
    }) 
    $('html').mouseup(function(e){ 
     dragging = false; 
    }); 

    $('#WeekTable tr td').mouseover(function(e){ 
     if (dragging) { 
      $(this).css('background-color', 'red'); 
     } 
    }); 
});​