如何使用autoscroll特性vue-draggable
如何使用autoscroll特性vue-draggable
提问于 2019-10-22 13:32:58
我正在尝试使用vue-draggable (https://github.com/SortableJS/Vue.Draggable)作为嵌套项的大列表(一个组织树)。
因为有大量的数据，用户需要能够在拖动时滚动。
据说，来自sortable.js的所有选项都是受支持的，但我不知道如何实现'autoscroll‘。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回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-23 14:43:40
我意识到现在这个问题已经很老了，但我也遇到了同样的问题。正如有人指出的那样，自动投币机在默认情况下确实是开着的。但是，这似乎是不可行的。对我来说，它有两部分：
- My页眉和页脚是固定元素，在页面上方盘旋，因此自动滚动只有在接近页面边框时才会启动，而不是元素的边框
这可以通过增加autoscroll敏感性来解决，您已经这样做了：
<draggable [...]
:scroll-sensitivity="200"
>- 看来，HTML5的默认拖放行为可能会干扰autoscroll特性.
这就像将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
};
}
}滚动并不像我所希望的那样美丽，但那可能只是我打开的标签的数量。
Stack Overflow用户
发布于 2019-10-22 13:41:40
原来自动投币机是默认开着的。它的反应比我想象的还要微妙。换句话说:你必须非常精确地拖动到屏幕的边缘(顶部或底部)来滚动，但它确实可以在框外工作。
所以它很简单：
import draggable from "vuedraggable";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58505505
复制相关文章
相似问题
腾讯云开发者
