angular - 如何使用 Angular 拖放从放置部分删除预览显示？

Question

我正在使用 Angular 的拖放功能，以便将卡片从卡片列表拖动到空 div。

我一直在检查 Angular 拖放的 API 文档，发现可以在拖放预览上进行配置，但不能在放放预览上进行配置(示例中最大的图像)

来源:

<mat-accordion
      cdkDropList
      [cdkDropListConnectedTo]="['viewer0', 'viewer1', 'viewer2', 'viewer3']"
      (cdkDropListDropped)="drop($event)"
    >
      <div *ngFor="let serie of seriesList">
        <div
          cdkDrag
          [cdkDragData]="serie"
        >
..........

显示div:

    <div cdkDropListGroup>
      <div
        cdkDropList
        cdkDropListConnectedTo="series-list"
        (cdkDropListDropped)="drop($event)"
      >
..........

预期:当我们拖动卡片时，图像的预览不能显示在右侧部分。

Answer 1

解决了!

我刚刚在文档中找到了 native 类 .drop-preview，并且我刚刚在 scss 文件中进行了一些更改:

.drop-preview {
  background: $accent;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  p {
    padding-top: 15px;
    font-size: 17px;
  }
}

现在看起来像这样: