2011-11-10 6 views
3

나는 HTML 코드의 일부를 가지고 :JQuery와 오버 스크롤 + 드래그 항목

<div class="stories"> 
    <div class="story">       
     <div class=".."> 
      <img alt="" class=".."> 
     </div> 
     <div class="dragger"></div> 
    <div> 

    <div class="story"> 
     ... 
     <div class="dragger"></div> 
    </div> 
</div> 

"드래는"요소가이 jQuery 코드가있는 페이지의 "이야기"블록을 드래그 할 수 있습니다 :

$('.dragger').mousedown(function(e){ 
    $(this).parent().draggable({ 
     disabled: false, opacity: 0.5, zIndex: 2700, revert: true, 
     stop: function() { $(this).draggable({ disabled: true }) } 
}) 

이 "스토리"요소를 오버 스크롤 영역에 넣을 때까지 아주 잘 작동합니다. 나는 "dragger"인 작은 영역 외에도 "클릭하고 드래그"를 관리 할 때 스크롤을 만들고 싶습니다. 그래서 예. 내가 머스 다운 이야기를 할 때 나는 두루 말기를 원해. "canceler"매개 변수를 ".dragger"와 함께 사용하려고했지만 원하는대로 작동하지 않습니다. 스크롤이 차단되지만 (이유는 모르겠지만) "스토리"항목도 드래그 할 수 없습니다. 페이지를 통해. 여기

는 이야기를 넣어하는에 "상위"사업부는 ".scheduled" '오버 스크롤'

$(".scheduled").overscroll({ 
    direction: 'horizontal', 
    wheelDirection: 'horizontal', 
    wheelDelta: 80, 
    cancelOn: ".dragger" 
}); 

의 코드입니다. 아이디어가 있습니까?

감사합니다, 당신은 cancelOn를 사용할 때 이벤트가 버블 링되지 않을 수 있으며 그 드래그 파괴 할 수

답변

4

갈산. 드래그하고자하는 요소를 클릭하면 일시적으로 오버 스크롤을 비활성화하십시오 (removeOverscroll 사용). 드래그가 끝나면 플러그인을 다시 사용하도록 설정할 수 있습니다.

+0

답변 해 주셔서 감사합니다. 난이 트릭을 비활성화/비활성화 overscroll을 사용하지 않도록 설정 한 후 비활성화 된 기본 (회색 창처럼) 스크롤바가 나타나서이 솔루션을 거부했습니다. 그러나 좋아, 나는 약간 수정과 함께 이것을 한번 더 시도 할 것이다. Thx – galsan

+0

이 작업을 수행하는 방법을 알아 냈습니까? 나는 비슷한 문제에 대한 해결책을 찾고있다. –