jQuery UI, 드래그 가능, 드롭 가능, 자동 스크롤

Question

드래그 가능한 아이콘을 허용하는 삭제 가능한 li 요소가 있습니다. 항목 목록은 스크롤 가능한 div 요소에 있습니다. 여기에 간단한 예제를 넣었습니다 : http://www.nerdydork.com/demos/dragscroll/

드래그 가능한 요소를 드래그 할 때 요소 목록을 자동 스크롤하는 방법이 있는지 궁금합니다. 예를 들어, 중간에 어딘가에 있다고 가정 해 봅시다. 예를 들어 http://www.nerdydork.com/demos/dragscroll/#j입니다. div의 맨 위로 접근하면 div의 맨 아래에 접근하면서 스크롤이 시작됩니다.

누구나 jQuery로이를 수행하는 방법을 알고 계십니까?

UPDATE

나는 더 가까워지고 있어요. 컨테이너 div의 상단 부분에 고정 된 div를 작성했습니다. & 그 위로 마우스를 가져 가면 자동 스크롤이 시작됩니다 http://plugins.jquery.com/project/aautoscroll

이제 문제는 내가 아래쪽 영역 위로 마우스를 가져 가면 글자에 내 드래그 가능 항목이 엉망이됩니다. 그것은 단지 낮은 자동 스크롤 영역에 문제가있는 것 같습니다. 그 아래로는 오토 스크롤 할 때 가져가 오른쪽 편지를 통해 NOT 얼마나 http://screencast.com/t/JBFWzhPzGfz

주의 사항 :

제가 이야기 버그를 확인하려면,이 짧은 비디오를 시청. 비디오가 끝나면 목록의 왼쪽 여백 위로 마우스를 가져 가면 어떻게 든 다시 설정되고 다시 작동하는 것으로 볼 수 있습니다.

Answer 1

draggable에 대해 "refreshPositions : true"옵션을 설정하면 jQuery가 모든 마우스 이벤트에서 오프셋을 다시 계산하게됩니다. 그것은 당신의 문제를 해결해야합니다.

Answer 2

당신은 또한 간격 기능을 사용하려고 할 수 있습니다 http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) { 
    $("#sortableContainer").append('<div class="sortable"></div>'); 
    $("#droppableContainer").append('<div class="droppable"></div>'); 
}; 

var adding = 0 
var scrollInterval = null; 

$("#sortableContainer").sortable({ 
    refreshPositions: true, 
    start: function (e, ui) { 
     scrollInterval = setInterval(function() { 
      var foo = $("#droppableContainer").scrollTop(); 
      $("#droppableContainer").scrollTop(foo + adding); 
     }, 50) 
    }, 
    stop: function (e, ui) { 
     clearInterval(scrollInterval); 
    }, 
    sort: function (e, ui) { 
     var top = e.pageY - $("#droppableContainer").offset().top 
     if (top < 10) { 
      adding = -15 
     } else if (top > $("#droppableContainer").height() - 10) { 
      adding = 15 
     } else { 
      adding = 0 
     } 
    }, 
}); 
$(".droppable").droppable({ 
    hoverClass: "active", 
    accept: ".sortable", 
    drop: function (event, ui) { 
     ui.draggable.remove(); 
    }, 
})