2012-02-17 6 views
0

내 코드는 td를 클릭하면 빨간색으로 바뀌는 테이블을 갖습니다. 다시 클릭하면 td가 정상적인 색으로 되돌아갑니다. 아래 코드를 사용하여이 작업을 수행 할 수 있습니다. 다음으로 마우스를 올려 놓고 마우스를 놓으면 빨간색으로 변합니다. 나는 이것에 대해 어떻게 생각하는지 모른다. 현재 코드 :Jquery 마우스 다운 이벤트에서 드래그 하시겠습니까?

<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> 

감사합니다!

답변

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'); 
}); 
+0

너무 감사합니다! 매력을 발휘합니다! – user1096685

0

여기로 이동하는 방법 중 하나입니다 그것에 대해. mousedown 이벤트를 jQuery와 함께 사용할 수 있습니다. 출시 때 false 다시 기본적으로 false의 글로벌 부울 dragging 설정하고 마우스 버튼을 누르고있는 동안 true 확인하고 :

$(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'); 
     } 
    }); 
});​ 
관련 문제