我正在尝试使用 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
最佳答案
我意识到这已经很老了,但我遇到了同样的问题。正如所指出的,自动滚动确实默认处于开启状态。但它似乎并不能开箱即用。对我来说,它有两个部分:
- 我的页眉和页脚是悬停在页面上方的固定元素,因此自动滚动仅在接近页面边框时启动,而不是元素边框
这可以通过增加自动滚动灵敏度来解决,您已经这样做了:
<draggable [...]
:scroll-sensitivity="200"
>
- HTML 5 的默认拖放行为似乎会干扰自动滚动功能。
这就像将 forceFallback
属性绑定(bind)到可拖动对象一样简单:
<draggable [...]
:force-fallback="true"
>
<小时/>
这当然也可以通过绑定(bind)dragOptions来完成,这样可以大大清理你的模板代码:
<draggable class="dragArea"
tag="ul"
v-bind="dragOptions"
>
并添加计算或数据属性dragOptions
:
computed: {
dragOptions() {
return {
group: {
name: 'g1'
},
scrollSensitivity: 200,
forceFallback: true
};
}
}
<小时/>
滚动效果并不像我希望的那么漂亮,但这可能只是我打开的选项卡数量的问题。
关于vue.js - 如何使用vue-draggable自动滚动功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58505505/