Vue.draggable: cannot set scrollSensitivity

Created on 1 Apr 2019 · 9Comments · Source: SortableJS/Vue.Draggable

Since scrolling with fixed elements was reported many times without a solutions here, here and here
I tried to use the solution here by increasing scrollSensitivity and setting forceFallback to true.

It seems that these options has no effect. I tried to comment the footer out to text without fixed elements and it seems the the scrollSensitivity is not changes

Jsfiddle link

https://jsfiddle.net/alali/smnjvfdx/

Is there any workaround for the fixed element problem?
It seems that after the last update options are not assigned correctly. I checked the documentations and tried using v-bind too which did not work. Any idea how to solve this?

Source

odai-alali

Most helpful comment

@odai-alali Please check the updated fiddle based on @owen-m1 feedback:
https://jsfiddle.net/dede89/s25p19hj/

The key is option has to use kebab-case since jsfiddle uses html template

David-Desmaisons on 3 Apr 2019

👍2

All 9 comments

Options are working fine.
Remove forcecallback and sort options and it will work:
https://jsfiddle.net/dede89/s25p19hj/

David-Desmaisons on 1 Apr 2019

No it's not. I am testing on chrome, nothing has changed.

odai-alali on 2 Apr 2019

What is the scenario step by step?

David-Desmaisons on 2 Apr 2019

grab an item and drag down. the list will scroll since there is no footer (when you are too close the edge, so scrollSensitivity is not 190)
with the list scrolled down (there is items outside the list view) try to drag an item to the top of the list. the list does not auto scroll upwards since there is a fixed element in the top of the page

odai-alali on 2 Apr 2019

scr

odai-alali on 2 Apr 2019

Ok understoo. Using the updated jsfiddle the option scrollSensitivity is correctly passed to sortable, but the behavior continues as you describe. @owen-m1 could you take a look at this one?

David-Desmaisons on 3 Apr 2019

The reason is that it is using the native browser's autoscroll, since forceFallback is not working. Although it seems that :forceFallback="true" is specified, but it is still using native drag and drop, so the option must not be being passed properly.