CDK с автоматической прокруткой с перетаскиванием

У меня есть приложение Angular 7, использующее CDK Drag-n-Drop для перетаскивания строк в очень длинном списке.

Что мне делать, чтобы разрешить автоматическую прокрутку длинного списка при перетаскивании элемента из текущего представления?

Любой пример кода, на который я могу сослаться?


drag-and-drop angular7 angular-cdk autoscroll
person user2777473    schedule 24.04.2019    source источник
comment
Ты нашел свой ответ ? Я столкнулся с аналогичной проблемой.   -  person Adrien PESSU    schedule 15.07.2019
comment
@AdrienPESSU Извините, пока нет хорошего решения. Пожалуйста, поделитесь, если у вас есть хороший   -  person user2777473    schedule 30.07.2019
comment
Пока не решил. Единственное, что мне нужно сделать, это переупорядочить прокручиваемый div.   -  person Adrien PESSU    schedule 31.07.2019
comment
Не решение для Angular 7, но с обновлением версии вы обнаружите, что эта функция была недавно реализована: github.com/angular/components/pull/16382   -  person Grochni    schedule 31.07.2019
comment
Я тоже ищу решение этого   -  person Sandip Ghadge    schedule 17.06.2020
comment
Любое решение для этого? @ user2777473   -  person TheDoozyLulu    schedule 21.06.2020
comment
Я разместил ответ по адресу: stackoverflow.com/questions/57755127/   -  person andreivictor    schedule 05.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой. Это происходит каждый раз, когда внешний элемент прокручивается. Это открытый вопрос - https://github.com/angular/components/issues/16677 < / а>. - Я немного изменил решение, указанное в этой ссылке.

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';
import { CdkDrag } from '@angular/cdk/drag-drop';

@Directive({
  selector: '[cdkDrag],[actualContainer]',
})
export class CdkDropListActualContainerDirective {
  @Input('actualContainer') actualContainer: string;
  originalElement: ElementRef<HTMLElement>;

  constructor(cdkDrag: CdkDrag) {
    cdkDrag._dragRef.beforeStarted.subscribe( () => {
      var cdkDropList = cdkDrag.dropContainer;
      if (!this.originalElement) {
        this.originalElement = cdkDropList.element;
      }

      if ( this.actualContainer ) {
        const element = this.originalElement.nativeElement.closest(this.actualContainer) as HTMLElement;
        cdkDropList._dropListRef.element = element;
        cdkDropList.element = new ElementRef<HTMLElement>(element);
      } else {
        cdkDropList._dropListRef.element = cdkDropList.element.nativeElement;
        cdkDropList.element = this.originalElement;
      }
    });
  }
}

Шаблон

 <div mat-dialog-content class="column-list">
    <div class="column-selector__list">
      <div cdkDropList (cdkDropListDropped)="drop($event)">
        <div
          *ngFor="let column of data"
          cdkDrag
          actualContainer="div.column-list"
        >
        </div>
      </div>
    </div>
  </div>
person rrr    schedule 19.08.2020