jQueryのUI、ドラッグ可能、ドロップ可能、自動スクロール

Question

ドラッグ可能なアイコンを受け付けるドロップ可能なli要素があります。項目のリストはスクロール可能なdiv要素にあります。私は簡単な例をここにまとめます：http://www.nerdydork.com/demos/dragscroll/

ドラッグ可能な要素をドラッグしているときに、要素のリストを自動スクロールする方法があるのだろうかと思います。たとえば、あなたが真ん中にいるとします（http://www.nerdydork.com/demos/dragscroll/#jなど）。 divの一番上に近づくと、スクロールアップが始まり、divの下にいくとスクロールダウンします。

誰でもjQueryでこれを達成する方法を知っていますか？

UPDATE

私が近づいています。私はコンテナdivの上部の&上部にfixed divを作成しました。上にカーソルを置くと、自動スクロールが開始されますhttp://plugins.jquery.com/project/aautoscroll

ここで問題は、下の領域にカーソルを合わせると文字上にドラッグ可能な部分が上がってしまうことです。しかし、それは低いオートスクロール領域にのみ問題があるようです。それがダウンしautoscrollsとき、ホバーが右の文字を超えていないかhttp://screencast.com/t/JBFWzhPzGfz

お知らせ：

私が話しているバグを表示するには、この短いビデオを見ます。ビデオの終わりに向かって、リストの左端にマウスを合わせると、何とかリセットされ、再び動作するように見えることがわかります。

Answer 1

ドラッグ可能に "refreshPositions：true"オプションを設定すると、jQueryはすべてのマウスイベントでオフセットを再計算します。それはあなたの問題を解決するはずです。

Answer 2

あなたはまた、インターバル機能を使用しようとすることができます：それはjQueryToolsに今あるよう 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(); 
    }, 
})