ターゲット要素をドラッグしながらスクロールを有効にするにはどうすればよいですか？

Question

2つのソートされていないリストが一緒に浮かんでいます。右のリストの項目を左のリストにドラッグすることができます。

<ul class="static sortable connected-sortable"> 
     <li class="not-sortable">Item 1<div class="hint">Sleep hier uw bestand</div></li> 
     <li class="not-sortable">Item 2<div class="hint">Sleep hier uw bestand</div></li> 
     <li class="not-sortable">Item 3<div class="hint">Sleep hier uw bestand</div></li> 
     <li class="not-sortable">Item 4<div class="hint">Sleep hier uw bestand</div></li> 
     <li class="not-sortable">Item 5<div class="hint">Sleep hier uw bestand</div></li> 
     <li class="not-sortable">Item 6<div class="hint">Sleep hier uw bestand</div></li> 
</ul> 

<ul class="sortable connected-sortable right"> 

    <li class="sortableRow">Item sortable 1</li> 
    <li class="sortableRow">Item sortable 2</li> 
    <li class="sortableRow">Item sortable 3</li> 
    <li class="sortableRow">Item sortable 4</li> 
    <li class="sortableRow">Item sortable 5</li> 
    <li class="sortableRow">Item sortable 6</li> 

</ul> 

私の左のリストにはスクロールバーがあります。

右のリストから左のリストにアイテムをドラッグすると、この左のリストのスクロールを有効にする必要があります。したがって、左のリストの下端または上端付近をドラッグすると、左のリストのスクロールバーが上下に移動します。

問題は、スクロール機能は、元のリスト、アイテムが出てきたリスト（現在のところスクロールバーを持っていないリスト）に対してのみ有効になっていることです。

ドラッグするときは、スクロール機能をターゲットリスト（左側のもの）に適用します。私のコードで

フィドル：私は右から左に項目をドラッグしていたときに http://jsfiddle.net/Y2RJj/42/

は、どのように私は左のリストについては、スクロールを活性化させるのですか？

Answer 1

ユーザーはあなたがnミリ秒ごとに次のようにヘルパーの位置を確認する機能を使用する必要があります彼のマウスを移動し、ソートイベント以来UPDATE

だけ火を：

edited jsFiddle

var timerId = 0; 
function testPos (l , h){ 

    timerId = window.setInterval(function(){ 
     var leftUl = l 
     var ulTop = leftUl.offset().top; 
     var ulBottom = ulTop + leftUl.height(); 
       console.log(h.offset().top >= ulTop && h.offset().top <= ulTop + 20) 
     if(h.offset().top >= ulTop && h.offset().top <= ulTop + 20){ 
      leftUl.scrollTop(leftUl.scrollTop() - 1) 
     } 

     if(h.offset().top +h.height() <= ulBottom && h.offset().top +h.height() >= ulBottom - 20){ 
       leftUl.scrollTop(leftUl.scrollTop() + 1) 
     } 
    }, 10); 

} 

を開始時にタイマーを開始し、停止時にclearIntervalを開始します。

start : function (event , ui){ 
       testPos ($('ul.static.sortable.connected-sortable') , ui.helper); 
      }, 
stop: function(event, ui) { 
        clearInterval(timerId) 
        ui.item.prev().children(".hint").hide(); 
        var nextItemclass = ui.item.next().attr("class"); 
        var prevItemClass = ui.item.prev().attr("class"); 
        if ((nextItemclass == "sortableRow")&&(ui.item.parent().hasClass('static'))){ 
          $(".right").append(ui.item.next()); 
         } 
        if ((prevItemClass == "sortableRow")&&(ui.item.parent().hasClass('static'))){ 
          $(".right").append(ui.item.prev()); 
         } 
         if(prevItemClass == "not-sortable"){ 
         ui.item.prev().addClass("highlight"); 
        } 
       }, 

あなたのマウスは、限られたスペース内に留まるとき、これは完璧に動作ソートイベント

sort : function(event, ui){ 

       var leftUl = $('ul.static.sortable.connected-sortable') 
       var ulTop = leftUl.offset().top; 
       var ulBottom = ulTop + leftUl.height(); 

       if(ui.offset.top >= ulTop && ui.offset.top <= ulTop + 20){ 
        leftUl.scrollTop(leftUl.scrollTop() - 1) 
       } 

       if(ui.offset.top +ui.helper.height() <= ulBottom && ui.offset.top +ui.helper.height() >= ulBottom - 20){ 
        leftUl.scrollTop(leftUl.scrollTop() + 1) 
       } 

      } 

jsFiddle