jquery UI 선택 가능 차단 된 요소에 대해 선택 가능

Question

Hy,

하루 동안 시간을 ​​선택하려고합니다. 경우에 따라 이날 모든 예약이 있습니다.

<ol id="selectable"> 
<li id="1" class="ui-widget-content" >7:00</li> 
<li id="1" class="ui-widget-content" >8:00</li> 
<li id="1" class="ui-widget-content" >9:00</li> 
<li id="1" class="ui-widget-content" >10:00</li> 
<li id="1" class="ui-widget-content" >11:00</li> 
<li id="1" class="ui-widget-content" >12:00</li> 
<li id="1" class="blocked" >reserved</li> 
<li id="1" class="blocked" >reserved</li> 
<li id="1" class="ui-widget-content" >3:00</li> 
</ol> 

차단 된 요소에 대해 이미 필터를 사용했지만 차단 된 요소 이후에도 계속 선택할 수 있습니다. 겹치기 때문에 결과가 유효하지 않습니다.

예 : 항목은 모두 오후 1 시부 터 2시 사이에 예약되어 있습니다. 그러나 나는 아직도 11시에서 3시까지를 선택할 수 있습니다.

그래서 차단 된 요소를 전달한 후 선택을 중지 (비활성화)해야합니다. 내 예를 들어 결과는 11-12시되어야합니다.

Javascript에는별로 익숙하지 않기 때문에 누군가 아이디어가 있기를 바랍니다.하지만 정말 즐겁습니다.

$("#selectable").selectable({ 
    cancel: ".blocked" 
}); 

은 API 문서 링크 : http://api.jqueryui.com/selectable/

보기이 JSFiddle : 내가 해결

http://jsfiddle.net/Sd8VJ/

Answer 1

당신은 취소 선택기를 설정해야 jQuery 호버업 이벤트를 사용하지만 조금 더러운 것 같아요.

$("#selectable .blocked").hover(function() { 
     $("#selectable").selectable("disable"); 
    }); 

Answer 2

을 API에 언급 한 바와 같이