自动滚动拖放(dom-autoscrolling)

时间:2018-07-18 07:54:25

标签: rxjs ng2-dragula

我有一个text元素列表,并希望在拖动新元素时自动将列表滚动到底部。

在我一次拖放列表中的元素一次之后,下面的示例可以正常工作。

我相信我需要在拖动之前致电一次observable

我正在使用draguladom-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 ...一次拖放一次即可正常工作。

有什么想法吗?

1 个答案:

答案 0 :(得分: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
  }
});
相关问题