How to enable scrolling while dragging my target element?

Question

I have 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 scroll bar.

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 the bottom or top edge of my left list, the scroll bar in the left list goes down or up.

The problem is that the scroll function is only allowed for the source list, the list from which the item came that does not currently have a scroll bar.

When dragging and dropping, I want the scroll function to be applied to the target list, the one on the left.

Script with my code: http://jsfiddle.net/Y2RJj/42/

How to activate scrolling for the left list when I drag an item from right to left?

Answer 1

UPDATE

since the sort event only fires when the user moves the mouse, you should use a function that checks the helper position every n milliseconds, for example:

edited by 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 at start and clearInterval at 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 a 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