jQuery UI를 만드는 방법 jScrollPane을 사용하여 드래그 가능 "자동 스크롤"

Question

누군가가이 문제에 부딪혔는 지 바로 확인합니다. 우리는 멋진 jScrollPane을 jQuery UI Draggable 요소와 함께 사용하고 있습니다. jScrollPane으로 이동할 때 잃어버린 Draggable 요소의 멋진 기능 중 하나는 포함 된 요소의 가장자리 근처로 드래그하면 가능한 경우 해당 요소를 스크롤한다는 것입니다. jScrollPane에서는 그렇게하지 않습니다. 다른 사람이이 문제를 해결하려고 했습니까?

감사합니다.

Answer 1

불행하게도이 간단하게 할 수 없습니다. jquery.ui.draggable.js의 코드를 살펴보면, 관련 부분은 : 당신이 볼 수 있듯이

$.ui.plugin.add("draggable", "scroll", { 
    start: function(event, ui) { 
     var i = $(this).data("draggable"); 
     if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') i.overflowOffset = i.scrollParent.offset(); 
    }, 
    drag: function(event, ui) { 

     var i = $(this).data("draggable"), o = i.options, scrolled = false; 

     if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML') { 

      if(!o.axis || o.axis != 'x') { 
       if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) 
        i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed; 
       else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity) 
        i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed; 
      } 

      if(!o.axis || o.axis != 'y') { 
       if((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) 
        i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed; 
       else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity) 
        i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed; 
      } 

     } else { 

      if(!o.axis || o.axis != 'x') { 
       if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) 
        scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed); 
       else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) 
        scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed); 
      } 

      if(!o.axis || o.axis != 'y') { 
       if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) 
        scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed); 
       else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) 
        scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed); 
      } 

     } 

     if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) 
      $.ui.ddmanager.prepareOffsets(i, event); 

    } 
}); 

, 그것은 직접 scrollParent의 scrollTop과 scrollLeft에 속성을 조작합니다. 안타깝게도 jScrollPane은 이러한 속성을 사용하지 않습니다 ...

위의 템플릿을 따라 추가 방법을 드래그 할 수 있습니다. scrollTop 또는 scrollLeft를 설정하는 대신 드래그 함수에서 API scrollBy 메서드를 사용합니다.

이 작업을 수행하려면 github에 플러그인을 포크하고 끌어 오기 요청을 제출하십시오. 당신이 그때 너을 기쁘게 할 수 있다고 생각하지 않는다면 나는 여가 시간이있을 때 그것을 시도하고 구현할 것이다.

Answer 2

각 탭을 표시 한 후에 jScrollPane을 다시 초기화해야합니다. 여기에 간단한 예제 :

http://jscrollpane.kelvinluck.com/invisibles.html

귀하의 경우에 당신은 시도 할 수 :

$("ul.tabs li").click(function() { 

    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn().jScrollPane(); //Fade in the active ID content and apply jScrollPane 
    return false; 
});