how to use autoscroll feature vue-draggable

Question

I'm trying to use vue-draggable (https://github.com/SortableJS/Vue.Draggable) for a large list of nested items (an organisational tree).

Since there is a lot of data, the user will need to be able to scroll while dragging.

All options from sortable.js are said to be supported, but I can't figure out how 'autoscroll' should be implemented. https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll

I tried:

    import draggable from "vuedraggable";
    import { Sortable, AutoScroll } from 'sortablejs';

    Sortable.mount(new AutoScroll());

and in the template:

    <draggable class="dragArea"
           tag="ul"
           :list="nodes"
           :group="{ name: 'g1' }"
           :scroll-sensitivity="250"
>
    <li class="drag rij" v-for="el in nodes" :key="el.id"
        {{ el.code }}
    </li>
</draggable>

I get the error that:

_sortablejs.AutoScroll is not a constructor

Answer 1

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.