Перетаскивание с автоматической прокруткой (дом-автопрокрутка)

Question

Контекст: у меня есть список текстовых элементов, и я хочу автоматически прокручивать мой список, когда мой перетаскиваемый элемент попадает внизу.

Этот пример ниже работает правильно, как только я перетащил один раз элемент в списке.

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

Я использую dragula и dom-autoscrolling.

import {takeUntil} from "rxjs/internal/operators/takeUntil";
import * as autoScroll from 'dom-autoscroller';

  const drake = this.dragulaService.find(this.dragulaBagName);
  this.dragulaService.drag.pipe(
    takeUntil(this.destroyed$),
  ).subscribe(([bag, movingEl, containerEl]) => {
    autoScroll(containerEl.parentNode, {
      margin: 20,
      pixels: 10,
      scrollWhenOutside: true,
      autoScroll: function () {
        return this.down && drake && drake.drake && drake.drake.dragging;
      }
    });
  });

по-видимому, this.down в обратном вызове autoScroll в начале имеет значение false.. после перетаскивания один раз, он работает правильно

Любая идея?

Answer 1

Попробуйте использовать (mousedown)="initAutoScroll()"

initAutoScroll(){
  const drake = this.dragulaService.find(this.dragulaBagName);
  this.scroll = autoScroll(
  containerEl.parentNode,
  {
    margin: 30,
    maxSpeed: 25,
    scrollWhenOutside: true,

    autoScroll: function () { 
      return this.down && drake.drake.dragging;
    }
  });
}


this.dragulaService.dragend.asObservable().subscribe(value => {
  if (this.scroll) {
    this.scroll.destroy();  // destroy when don't use auto-scroll
  }
});