Как включить прокрутку при перетаскивании элемента-мишени?

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

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); 

} 

и запустить таймер при запуске и очиститьInterval при остановке

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