CODEWITHSUNDEEP
rxjsng2-dragula
don
don

Reputation: 51

drag and drop with auto scrolling (dom-autoscrolling)

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?

Upvotes: 5

Views: 3371

Answers (1)

Manh Tung
Manh Tung

Reputation: 71

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
  }
});

Upvotes: 4

Related Questions