how to use autoscroll feature vue-draggable

I realize this is quite old now, but I came across the same problem. As was pointed out, autoscroll is indeed ON by default. But it does not seem to work out of the box. For me, there were two parts to it:

1. My header and footer were fixed elements hovering above the page, so the autoscroll only kicked in when nearing the page borders, not the element's borders

This can be solved by increasing the autoscroll sensitivity, which you have already done:

<draggable [...]           :scroll-sensitivity="200">

2. It seems like HTML 5's default Drag and Drop Behaviour can interfere with the autoscroll feature.

This is as simple as binding the forceFallback property to the draggable:

<draggable [...]           :force-fallback="true">

This can of course also be done by binding dragOptions which cleans up your template code a lot:

<draggable class="dragArea"           tag="ul"           v-bind="dragOptions">

And adding a computed or data property dragOptions:

  computed: {    dragOptions() {      return {        group: {          name: 'g1'        },        scrollSensitivity: 200,        forceFallback: true      };    }  }

The scrolling is not as beautiful as I would've hoped, but that might just be the amount of tabs I have open.

It turns out that autoscroll is ON by default. It just responds more fiddly than I would have expected. In other words: you have to drag pretty precisely to the edge of the screen (top or bottom) to scroll, but it does work out of the box.

So it's as simple as:

import draggable from "vuedraggable";