Question

我有一个Angular 7应用程序，使用CDK Drag-n-Drop拖放非常长的列表中的行。

当从当前视图中拖出项目时，如何使长列表自动滚动？

我可以参考任何示例代码吗？

Answer 1

我也遇到过同样的问题，只要外部元素可滚动，它就会发生。这是未解决的问题-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>

CDK拖放自动滚动

1 个答案: