5

I have a list of text elements and want to automatically scroll my list to the bottom when I'm dragging my new element.

This example below works properly once I drag-and-dropped one time an element in a list.

I believe I need to call once an observable before the drag.

I'm using dragula and 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;
    }
  });
});

Apparently, this.down in callback autoScroll is set to false at the beginning... once drag-and-dropped one time, it works correctly.

Any ideas?

Nico
  • 790
  • 1
  • 8
  • 20
don
  • 51
  • 1
  • 4

1 Answers1

3

try use (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
  }
});
Ruddy
  • 61
  • 4
  • I was missing that if my container's full scrollHeight is 11,000px, the `containerEl.parentNode` (or `.parentElement`)'s height must be the limited say 800px in order for the autoScroller to consider the mouse near its edge, rather than an extra wrapping div that is also 11,000px so doesn't auto scroll. – Michelle Norris Dec 04 '18 at 14:09