Sortable: Drag + wheel scroll feature

[NGorco]

I want to scroll page while dragging element. But while dragging mouse wheel not firing 'scroll' event. How to recreate that feature like in jQuery?

https://jqueryui.com/draggable/#scroll

[lumberman]

Confirm. This feature is available in JQuery sortable and very useful when you have a large page based on drag and drop interface (like Trello or page builder) and you need to drag elements across the page.

[TheHollidayInn]

I had the same issue and it seems the dragula library did as well. This may help: https://www.npmjs.com/package/dom-autoscroller.

[gmatkowski]

any updates about that? It's very important in my projects :-(

[seyfer]

@TheHollidayInn can you please share your set up code, how exactly you have used this library?

[seyfer]

yes, the example given for scroll doesn't work in Chrome :cry:
http://jsbin.com/tutuzeh/edit?html,js,output

[geoidesic]

Also it is being used in VueDraggable library and there we have the same issue: https://github.com/SortableJS/Vue.Draggable/issues/181

[Ikaer]

Any news on this issue ? or at least a workaround ?

[sergeevpasha]

cant find any workaround too =(

[owen-m1]

Is this really necessary with the Autoscroll feature?

[sergeevpasha]

@Flame2057 i have like 1000 rows that i can sort, and when I need to drag last item to the top its really a nightmare, scroll and drag will make it super easy

[wernerb90]

+1 - any news?

This is seems like a pretty logical and mandatory feature ... I'm very happy with this library over jQuery UI - but this might be a deal breaker as we have big draggable/sortable components on a long page that we're using this for, so it's a bit counter-intuitive at the moment.

[owen-m1]

@wernerbarnard @sergeevpasha @Ikaer @geoidesic It seems that the scroll wheel does work if forceFallback: true is specified in the options. If this option is set to false, as is by default, the browser's native drag and drop will be used, and this is what is preventing the scrollwheel from it's normal functionality.

[sergeevpasha]

thanks, that works now =)

[Amir-Ravnjak]

Multi-drag feature is a bit buggy if you set forceFallback:true, it randomly deselects item, sometimes you have to do double click, on page load your first try to select will fail 90%.
I have 2 large container and I need to transfer data from each other, so I need both multi-drag and mouse wheel scroll.
I need 1 more thing, on event onMove, I'd like to access all items of multi drag, with something similar to onAdd event property items.

[owen-m1]

@Amir-Ravnjak Try increasing fallbackTolerance a bit.

[Amir-Ravnjak]

Increasing fallbackTolerance makes text being selected when you start dragging.

[owen-m1]

@Amir-Ravnjak I thought on most mobile devices that text is selected after a long touch hold, not by moving the touch. What device are you testing on?

[Amir-Ravnjak]

I am testing it on PC and laptop, trying to use it with mousewheel

[owen-m1]

@Amir-Ravnjak All I can think of now is for you to set user-select: none on the items. This can maybe be solved in a future update.