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

所有这些都在那个链接中： 链接

Answer 3

.cdk-drag-placeholder {

  opacity: 0;
}