как использовать функцию автопрокрутки vue-draggable

как использовать функцию автопрокрутки vue-draggable

22.10.2019 04:32:58 Просмотров 42 Источник

Я пытаюсь использовать vue-draggable ( https://github.com/SortableJS/Vue.Draggable ) для большого списка вложенных элементов (организационное дерево).

Поскольку данных много, пользователь должен иметь возможность прокручивать их при перетаскивании.

Все варианты из сортируемых.говорят, что 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
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/58505505/how-to-use-autoscroll-feature-vue-draggable#comment105039373_58505505
Вам удалось это исправить?

Ответы - как использовать функцию автопрокрутки vue-draggable / how to use autoscroll feature vue-draggable

Katinka Hesselink

22.10.2019 04:41:40

Оказывается, автопрокрутка включена по умолчанию. Он просто реагирует более уверенно, чем я ожидал. Другими словами: вы должны перетащить довольно точно к краю экрана (сверху или снизу), чтобы прокрутить, но это работает из коробки.

Так что это так просто, как:

import draggable from "vuedraggable";
https://stackoverflow.com/questions/58505505/how-to-use-autoscroll-feature-vue-draggable/58505670#comment105039457_58505670
не работает на меня
Aram Becker

23.01.2020 05:43:40

Я понимаю, что теперь это довольно старая проблема, но я столкнулся с той же проблемой. Как уже отмечалось, автопрокрутка действительно включена по умолчанию. Но это, кажется, не работает из коробки. Для меня она состояла из двух частей:

  1. Мои верхний и Нижний колонтитулы были фиксированными элементами, зависшими над страницей, поэтому автопрокрутка срабатывала только при приближении к границам страницы, а не к границам элемента

Это можно решить путем увеличения чувствительности автопрокрутки, что вы уже сделали:

<draggable [...]
           :scroll-sensitivity="200"
>
  1. Похоже, что поведение перетаскивания HTML 5 по умолчанию может помешать функции автопрокрутки.

Это так же просто, как привязка forceFallback


Это, конечно, также может быть сделано путем привязки dragOptions, которая очищает ваш код шаблона много:

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

И добавление вычисляемого свойства или свойства данных <draggable class="dragArea" tag="ul" v-bind="dragOptions" > :

dragOptions

Прокрутка не так красива, как я надеялся, но это может быть просто количество открытых вкладок.

https://stackoverflow.com/questions/58505505/how-to-use-autoscroll-feature-vue-draggable/59881129#comment105978225_59881129
Выглядеть хорошо. Я действительно удивляюсь, почему вы используете вычисляемое свойство, когда вы ничего не вычисляете. Это может быть свойство данных, верно?
https://stackoverflow.com/questions/58505505/how-to-use-autoscroll-feature-vue-draggable/59881129#comment106029072_59881129
@KatinkaHesselink Да, абсолютно. Вычисляемое свойство-это как раз то, что я нашел в Примере. (хотя я ни за что на свете не могу вспомнить, где именно). Для меня вычисленное свойство было полезно для groupгруппы SortableJS на основе реквизитов.
Закрыть X