Can not auto scroll with nested components

[mgnjatovic-kushim]

From : SortableJS/Vue.Draggable#355 (comment)

Jsfiddle link

https://jsfiddle.net/6pk7zxLq/18/

Step by step scenario

If i have a draggable group, in which i can drag elements on same list with self scroll and between more lists with outer scroll, auto scrolling only works on inner lists

Expected Solution

Enable auto scroll on both lists or provide an option to choose which element will scroll horizontally and which element will scroll vertically

[nlaveck]

I think this is more a problem with having nested scrollable containers than sortable. In your example, I'm able to auto scroll the outer list by dragging an element from the inner list into the area with the blue background. However the outer-list will not auto scroll if I'm dragging over an inner list because the inner list is trying to scroll.

[mgnjatovic-kushim]

Maybe I'm missing something. Is there a way to achieve that behavior without having nested containers?

[nlaveck]

It really depends on the page layout. I think it'd be less of a problem if your inner scrollable containers are smaller and in the center of the page. Or don't make the inner containers scrollable and allow them to grow.

[mgnjatovic-kushim]

Yeah, thanks for your suggestions, but my layout is not a subject to change, and there is even less space around.

[owen-m1]

It works fine for me...

[owen-m1]

Never mind, I see your issue. You want it to autoscroll on the X axis even if the element is above another list?

[owen-m1]

@mgnjatovic-kushim Please let me know if PR #1386 solves this issue. There is a demo included in the description.

[mgnjatovic-kushim]

Unfortunately no. Try to move a card from first column to last. Behavior I was hoping for is something like trello.

[owen-m1]

@mgnjatovic-kushim Try setting the option forceFallback:true. HTML native DnD has it's own autoscroll method that doesn't work the same as the implemented autoscroll.

[owen-m1]

@mgnjatovic-kushim Have you tried this?

[mgnjatovic-kushim]

I've resolved issue by adding div around whole component, and implementing the scroll when card is dragged manually. That's the only thing that worked. Force fallback was set to true whole time, not making any difference.

[owen-m1]

@mgnjatovic-kushim I apologize, there was a part of that code I forgot to delete. The fixed working demo should be available here: https://jsbin.com/kesewor/edit?html,js,output

You can also use this link in your original JSFiddle as Sortable.JS to use the updated autoscroll: https://rawcdn.githack.com/RubaXa/Sortable/cd01d01fce598e1be99d40771ce3f16860dde1d7/Sortable.js