CDK拖放自动滚动

Question

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

当被拖动的项目移出当前视图时，我该怎么做才能允许长列表自动滚动？

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

- user2777473

---

你找到答案了吗？我也遇到了类似的问题。 - Adrien PESSU

还没有解决。我唯一的线索是重新排列我的可滚动div。 - Adrien PESSU

这不是 Angular 7 的解决方案，但通过版本升级，您会发现最近已经实现了此功能：https://github.com/angular/components/pull/16382 - Grochni

我也在寻找解决方案。 - Sandip Ghadge

我已经在以下链接发布了答案：https://dev59.com/c1MH5IYBdhLWcg3w4E3k#64686415 - andreivictor

Answer 1

如此处所述，您只需要将cdkScrollable添加到您的列表容器中即可。

- Mohammad Rafigh

Answer 2

我曾面临相同的问题，每当外部元素可以滚动时就会发生这种情况。这是一个未解决的问题-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>

- RRR