Question

我想通过拖放CDK来更改列表顺序。它可以在我网站的任何页面上使用，但是当我在材质对话框中使用它时，它将无法使用。当我将一个列表项拖到另一个项目上时，它不会在拖动时改变位置，也不会在拖放时改变位置。有什么特别的方法可以使其在对话框中起作用？

我正在尝试的最简单的代码：

HTML

<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div cdkDrag *ngFor="let n of numbers">
    {{n}}
  </div>
</div>

ts文件

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

numbers: number[]= [];

constructor() {
  this.n.push(2,3,4,5);
}

drop(event: CdkDragDrop<number[]>) {
  moveItemInArray(this.numbers, event.previousIndex, event.currentIndex);
}

app.module.ts

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({ imports: [..., DragDropModule]})

就像我说的那样，这段代码可以在任何页面的任何地方使用，但是当我将其复制到对话框组件时却无法使用

Answer 1

在这里找到了一个临时解决方案（通过@DeonduPreez）：

https://github.com/angular/components/issues/15880#issuecomment-523476619

想法是在对话框打开之前保持当前滚动位置，然后滚动到顶部然后打开对话框最后，在对话框关闭后，滚动回到保存的位置。

const doc = document.documentElement;
const left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

if (top != 0 || left != 0) {
  window.scrollTo({ top : 0, left: 0 });
}
const modal: MatDialogRef = this.dialog.open(ModalComponent);
modal.afterClosed().subscribe(() => {
if (top != 0 || left != 0) {
    window.scroll({ top : top, left : left, behavior: "smooth" });
}
});

角度拖放cdk在角度材质对话框中不起作用

1 个答案: