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

Terni

Did you managed to fix this? – Guib

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.

Mimesis

Looks good. I do wonder why you're using a computed property when you're not computing anything. It could be a data-property, right? – Terni

@KatinkaHesselink Yes, absolutely. A computed property is just what I found in an example. (although I can't for the life of me remember where). For me, a computed property was useful to change the SortableJS group options dynamically based on the props. – Mimesis

For me, setting :force-fallback="true" results in the draggable component to behave weirdly overall, I am unable to add more than one item if I set this option – Punctuation

Me too,,. if I use this, :force-fallback="true" I cannot clone item from other draggable component,. – Ferreira

Passing such option objects as computed instead of data properties is a best practice regarding maintainability. It clarifies that the value is constant and will not change dynamically anywhere in the code, as there is no setter. This can be very helpful for people who read the code for refactoring or debugging. – Katleen

Answer 2

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";

Terni