Question

我正在尝试将vue-draggable（https://github.com/SortableJS/Vue.Draggable）用于大量嵌套项目（组织树）。

由于有很多数据，因此用户需要能够在拖动时进行滚动。

据说可以支持sortable.js的所有选项，但是我不知道应该如何实现“自动滚动”。 https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll

我尝试过：

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

    Sortable.mount(new AutoScroll());

并在模板中：

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

我得到以下错误：

_sortablejs.AutoScroll is not a constructor

Answer 1

我意识到这已经很老了，但是我遇到了同样的问题。如前所述，默认情况下自动滚动确实是打开的。但这似乎并不可行。对我来说，它包括两个部分：

我的页眉和页脚是固定在页面上方的固定元素，因此自动滚动仅在靠近页面边框时才插入，而不是元素的边框

这可以通过提高自动滚动灵敏度来解决，这已经完成：

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

似乎HTML 5的默认拖放行为会干扰自动滚动功能。

这就像将forceFallback属性绑定到可拖动对象一样简单：

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

这当然也可以通过绑定dragOptions来完成，它可以大量清理模板代码：

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

并添加计算或数据属性dragOptions：

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

滚动并不像我希望的那样漂亮，但这可能仅仅是我打开的选项卡的数量。

Answer 2

事实证明，自动滚动默认情况下为ON。它的响应比我预期的要好。

所以就这么简单

import draggable from "vuedraggable";

如何使用自动滚动功能vue-draggable

2 个答案: