如何禁用cdkDrag拖动动画？

Question

我有一个示例，其中我使用了 cdkDrag.I 当我开始时不想看到任何东西 drag.How 我可以禁用应用于拖动状态的 CSS classes 吗？

上面你可以看到当我拖动它时我的项目有一个小视图，我不想 see.How 这可能吗？我找不到哪个 CSS class 应该是已禁用。

https://stackblitz.com/edit/angular-gbls7d-rih7te?file=src/app/cdk-drag-drop-connected-sorting-example.html

Answer 1

您可以使用 cdkDragPreview 指令自定义拖动预览，如 Angular Materials D&D CdkDragPreview docs 中所述。

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    {{movie.title}}
    <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
  </div>
</div>

参见示例 Stackblitz。

---

对于您的示例，您可以将一个元素添加到 cdkDrag 根元素中。

例如：

...
<tr *ngFor="let feed of todo;let index = index" cdkDrag  (cdkDragStarted)="started($event)">
          <span *cdkDragPreview>Test</span>
                    <td>
...

检查你的改编Stackblitz。