How do I enable scrolling while dragging on my target element?

Question

I've got 2 unsorted lists, floating together. Items from the right list can be dragged to the left list.

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

My left list has a scrollbar.

When I drag items from my right list to my left list, I want to enable scrolling for this left list. So when I drag near the bottom or top edge of my left list, the scrollbar on the left list goes down or up.

The problem is that the scrolling functionality is only enabled for the original list, the list where the item came from, which doesn't have a scrollbar at all at the moment.

When dragging, I want the scrolling functionality to be applied to the target list, the one on the left.

A fiddle with my code: http://jsfiddle.net/Y2RJj/42/

How do I activate scrolling for the left list when I'm dragging an item from right to left?

Answer 1

UPDATE

since the sort event only fire when the user move his mouse you should use a function who check position of the helper every n milliseconds like this :

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

}

and start the timer on start and clearInterval on 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");
                    }
                },

You can do this with the sort event

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