Angular Автоматическая прокрутка с помощью перетаскивания - PullRequest
0 голосов
/ 29 января 2020

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

Я следую примеру интеграции dragula и dom-autoscroller в мое приложение, поскольку у dragula нет встроенной автоматической прокрутки. Я следую этому примеру из приложения angular, в котором используются сенсорные и другой на codepen , который использует dragula и автопрокрутку вместе.

Из примеров я создал эту логику c:

    const drake = this.dragulaService.find('MyDragGroup').drake;

    this.scroll = autoScroll(
      window,
      {
        margin: 30,
        maxSpeed: 25,
        scrollWhenOutside: true,
        autoScroll() {
          return this.down && drake.dragging;
        }
      });

Первоначально я поместил эту логику c в родительский компонент, но селезень вернулся undefined. Когда я помещаю его прямо в один из компонентов, который обрабатывает перетаскивание, я получаю в консоли следующую ошибку TypeError:

enter image description here

... сопровождаемый ERROR CONTEXT, который применяется к шаблону, связанному с компонентом.

<div class="drag-things" dragula="MyDragGroup" [(dragulaModel)]="currentGroup.MyDragThings">
    <div *ngFor='let item of currentGroup.MyDragThings'>
        <app-drag-thing [currentDragThing]='item'></app-drag-thing>
    </div>
</div>

Я проверил с документацией , и я не думаю, что делаю что-то необычное. Основное различие между тем, как я делаю вещи, и тем, что дают примеры и документация, заключается в том, что я использую директиву для создания селезня (используя [(dragulaModel)], где они выбирают создание дракона внутри компонента.

Может ли это быть причиной проблемы? Почему это может быть причиной проблемы? Как заставить мою автопрокрутку работать? Есть ли лучший способ сделать sh это вообще?

1 Ответ

0 голосов
/ 29 января 2020

Так что ответ ... Не используйте Dragula, если вам нужна автопрокрутка. Вместо этого используйте Angular Материал CDK перетаскивания. Встроенная автопрокрутка. Проверьте:

https://material.angular.io/cdk/drag-drop/overview

...