Sortable
Sortable copied to clipboard
SortableJS
Drag + wheel scroll feature
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
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.
I had the same issue and it seems the dragula library did as well. This may help: https://www.npmjs.com/package/dom-autoscroller.
@TheHollidayInn can you please share your set up code, how exactly you have used this library?
yes, the example given for scroll doesn't work in Chrome :cry:
http://jsbin.com/tutuzeh/edit?html,js,output
Also it is being used in VueDraggable library and there we have the same issue: https://github.com/SortableJS/Vue.Draggable/issues/181
@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
+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.
@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.
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.
Increasing fallbackTolerance makes text being selected when you start dragging.
@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 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.
Hello, is the drag problem with mouse wheel solved? I use native drag html5 but I can't get it to work with mouse wheel
On a demo page http://sortablejs.github.io/Sortable/ I'm able to drag and automatically scroll down the page. Closing the issue
Just tested it again, using the demo page, in Brave, Opera, Edge, Chromium and Firefox, and is not working. Tested on Windows 11, last versions of these browsers. Steps to reproduce:
- Start dragging an element
- while still dragging try to scroll the page
- the page will not scroll
If this plugin is working with native HTML5 Drag I don't think it's possible to do Scroll when dragging an element. This drag must be changed to one executed by Javascript and is not native to HTML5
