JQuery UI Sort, scroll (jsFiddle example)

Question

I am trying to figure out how to make my "sortable lists" scroll while I drag the list item.

Scrolling works fine on the list I'm dragging, but not on the list I'm dragging to.

http://jsfiddle.net/jordanbaucke/pacbC/1/

Another question asking a similar thing:

jQuery sortable scroll container div with auto overflow

PS. Pivotaltracker, www.pivotaltracker.com does it well.

Answer 1

An old question, but I struggled with this for several hours today, so I decided that I would share what I found out.

Scrolling sort is a function of the scrollParent offset, the current scroll position, the current position of the element, and scroll sensitivity. Sorting is performed when _mouseStart starts. This sets scrollParent and caches its offset for the current sort. Armed with this knowledge, we can do a little shuffle in the event handler:

over: function (event, ui) { ui.item.data('sortableItem').scrollParent = ui.placeholder.parent(); ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset(); } 

Fires when a dragged item changes containers. The placeholder has already moved to the new container when you click on the over event. The code gets a new scrollParent and returns the offset.

I forked the Tats_innit fiddle for brevity: http://jsfiddle.net/3E2Hg/84/

ScrollParent gets links elsewhere in the entire event structure, so I'm not sure if this is bulletproof. However, I think this is a good starting point. If I get any errors, I will update this answer.

Answer 2

Working demo http://jsfiddle.net/3E2Hg/1/

Please let me know if I missed something and slo see my previous answer: Automatically scroll through droppable div when dragging

Behavior: The div you are dragging into will now also scroll. (rest code below)

Hope this helps,

the code

 $(function() { var sortlists = $("#List1, #List2").sortable({ tolerance: 'pointer', connectWith: '#List1, #List2', helper: 'original', scroll: true }).on('scroll', function() { sortlists.scrollTop($(this).scrollTop()); }); });​ 

Answer 3

You just need to add overflow: auto; to the parent element, whether it is ul or #element , or whatever you have.