如何使用 Angular 拖放从放置部分中删除预览显示？答案

【问题标题】：How can I remove the preview display from drop section using Angular Drag and Drop?如何使用 Angular 拖放从放置部分中删除预览显示？
【发布时间】：2019-10-30 18:41:24
【问题描述】：

我正在使用 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)"
      >
..........

预期：在我们拖动卡片的那一刻，图像的预览不能显示在右侧部分。

【问题讨论】：

标签： angular drag-and-drop angular-material display

【解决方案1】：

解决了！

我刚刚在文档上找到了原生类.drop-preview，我只是在scss文件中做了一些改动：

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

现在看起来像这样：

【讨论】：

【解决方案2】：

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

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

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

【讨论】：