How to scroll the screen when dragging items from scrollable / sortable to another, outside the screen?

Question

I am trying to achieve the same function as Trello for dragging items from one list (phase) to another. When there are too many lists / phases, I would like the screen to scroll automatically when dragging from the leftmost list to the right most, which would probably be “off screen”.

I currently have two sort levels that scroll (see jsFiddle );

The first level scrolls horizontally and the second vertically. That is, I can move the lists horizontally and each item in the list only vertically.

At the second level, I have:

$('.phase-block').sortable({ scroll: true, connectWith: '.phase-block', appendTo: '.phase-scroll', helper: 'clone' }); 

which puts the helper in the container and allows me to drag to the list on the right, but does not allow vertical scrolling in the list.

Is there a way to save both types of scrolling without sacrificing one for the other?

Answer 1

Update

I changed the on scroll function so that it behaves like a traditional scroll (before I did it, so that at any time your moved up or down it would try to scroll). It was also built primarily to work with this example, and not with a wider range of box sizes, etc.

Now I'm only trying to scroll up or down when the field you drag reaches the top or bottom scroll bar. The only difficult part depends on the size of the window in which you drag the offset of the field in which you want to start scrolling, depending on the size.

I am sure there is a way to find out when the field you are dragging is larger than halfway below or above the bottom / top of the scroll window and then it scrolls accordingly, but the solution is not what I could come up with at this point.

Another thought that will simplify this is that you knew all the possible sizes of boxes that you could drag using this script. You can customize the object with reference to all the box sizes associated with individual values ​​that you could use to change when scrolling starts from a specific window size. If this is something viable for you, I can show you how I will do it.

But here is an updated example with your last violin, which has a different block height. I worked a bit with the code to make it so that no matter what block size (of the ones you specified), the scroll will start at about the same time.

 $('.phase-block').sortable({ scroll: true, connectWith: '.phase-block', appendTo: '.phase-scroll', helper: 'clone', sort: function(event, ui){ if(ui.offset.top >= activePhaseBlock.height()+(90 -ui.item.height() > 0 ? 65-ui.item.height() : 10)) activePhaseBlock.scrollTop(activePhaseBlock.scrollTop()+ui.item.height()); else if(ui.offset.top <= 0+(ui.item.height() > 25 ? 20 : 40)) activePhaseBlock.scrollTop(activePhaseBlock.scrollTop()-ui.item.height()); }, over: function(event, ui){ activePhaseBlock = $(this); } }); 

If you plan on having random block heights, this method will probably not be the most viable, and you will have to find a universal way to determine when the offset is large enough or low enough to start scrolling no matter the block size.

Let me know if you need clarification.

Script example