Wie aktiviere ich das Scrollen beim Ziehen meines Zielelements?

Question

Ich habe 2 unsortierte Listen, die zusammen schweben. Elemente aus der rechten Liste können in die linke Liste gezogen werden.

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

Meine linke Liste hat eine Bildlaufleiste.

Wenn ich Elemente aus meiner rechten Liste in meine linke Liste ziehe, möchte ich das Scrollen für diese linke Liste aktivieren. Wenn ich also am unteren oder oberen Rand meiner linken Liste ziehe, wird die Bildlaufleiste in der linken Liste nach unten oder oben verschoben.

Das Problem ist, dass die Scrolling-Funktionalität nur für die ursprüngliche Liste aktiviert ist, die Liste, aus der das Element stammt, die derzeit überhaupt keine Bildlaufleiste hat.

Wenn ich ziehe, möchte ich die Scrolling-Funktionalität auf die Zielliste, die auf der linken Seite angewendet werden.

Eine Geige mit meinem Code: http://jsfiddle.net/Y2RJj/42/

Wie aktiviere ich Scrollen für die linke Liste, wenn ich ein Element von rechts nach links ziehen?

Answer 1

UPDATE

seit dem Sortier Ereignis nur ausgelöst, wenn der Benutzer seine Maus bewegen sollten Sie eine Funktion verwenden, die alle n Millisekunden wie diese Position des Helfer überprüfen:

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

} 

und starten Sie den Timer beim Start und ClearInterval bei Stop

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"); 
        } 
       }, 

Sie können dies mit der Art Ereignis

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