How to disable cdkDrag dragging animation?

1
votes

I have an example where I used cdkDrag.I dont wanna see anything when I start to drag.How can I disable CSS classes which applied on dragging state?

enter image description here

Above you can see there's a little view of my item when I drag it and I dont wanna see.How can it be possible?I couldnt find which CSS class should be disabled.

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

1
cssangularangular-cdk
When you start dragging, .cdk-drag-preview class activated. And when you release item, .cdk-drag-animating class activated. Change .cdk-drag-preview display property to none. – Sadaf Niknam

1 Answers

2
votes

You can customize the dragging preview with cdkDragPreview directive, described in 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>

See example Stackblitz.

For your example you can add an element into your cdkDrag root element.

E.g.:

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

Check your adapted Stackblitz.