6

我正在尝试将 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
4

2 回答 2

17

我意识到这已经很老了,但我遇到了同样的问题。正如所指出的,默认情况下自动滚动确实是开启的。但它似乎不是开箱即用的。对我来说,它有两个部分:

  1. 我的页眉和页脚是悬停在页面上方的固定元素,因此自动滚动仅在接近页面边框时才启动,而不是元素的边框

这可以通过增加自动滚动灵敏度来解决,您已经这样做了:

<draggable [...]
           :scroll-sensitivity="200"
>
  1. 似乎 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
      };
    }
  }

滚动不像我希望的那样漂亮,但这可能只是我打开的标签数量。

于 2020-01-23T14:43:40.213 回答
-3

事实证明,默认情况下自动滚动是打开的。它的反应比我预期的要复杂。换句话说:您必须非常精确地拖动到屏幕边缘(顶部或底部)才能滚动,但它确实可以开箱即用。

所以它很简单:

import draggable from "vuedraggable";
于 2019-10-22T13:41:40.020 回答