如何使用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

解决了！

我刚刚在文档中找到了本机类 .drop-preview ，我只是在scss文件中做了一些更改：

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

现在看起来像这样：

Answer 2

我的朋友，最好的方法是使用CSS类，您可以在其中更改所需的内容，例如预览。

.cdk-drag-preview {
    background: white;
    width: 100%;
    height: 100%;
    opacity: 0.5;
 }

所有这些都在该链接中： link