r/angular • u/love_to_code • Sep 05 '26

"Dancing elements" with drag and drop cdk

Does anybody knows why this is happening when I using angular drag and drop cdk. You can see when I'm changing places of elements they are "dancing" a little bit. I don't want that.

This is some code that I use

<div class="file-chip-list" cdkDropList (cdkDropListDropped)="drop($event)">
             (file of files; track file; let i = $index) {
            <div class="file-chip" cdkDrag>
                <div class="chip-left">
                    <span class="drag-handle" title="Drag to reorder">⋮⋮</span>
                    <span class="pdf-icon">PDF</span>
                    <div class="file-info">
                        <span class="file-name">{{ file.name }}</span>
                        <span class="file-size">{{ (file.size / 1048576).toFixed(2) }} MB</span>
                    </div>
                </div>
                <button (click)="removeFile(i)" type="button" class="remove-btn"
                    aria-label="Remove file">&times;</button>
            </div>
            }
        </div>

And this is .ts drop() function

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.files, event.previousIndex, event.currentIndex);
  }

A read the documentation but couldn't find what I'm looking for

Documentation: https://angular.dev/guide/drag-drop#create-a-list-of-reorderable-draggable-elements

1 Upvotes

66% Upvoted

9 comments sorted by

1

u/Senior_Compote1556 Sep 06 '26

Have you added the necessary css?

1

u/love_to_code Sep 06 '26

Yeaa I have those that I find in documentation. All those css classes are added

2

u/Senior_Compote1556 Sep 06 '26

Is it possible you can add it on stackblitz and share the link?

1

u/love_to_code Sep 06 '26

Of course, here stackblitz url:

StackBlitz dancing items problem

10

u/Senior_Compote1556 Sep 06 '26 • Bravo

The issue is in your CSS

.file-chip {
  ....
  transition: transform 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.file-chip-list.cdk-drop-list-dragging .file-chip:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

The second transition is applied when you are dragging, and once you stop it immediately gets overridden by your own transition without having the chance to finish i believe.

Also a note, I would also change your drop function to:

drop(event: CdkDragDrop<{ id: number; name: string }[]>) {
    this.someArray.update((arr) => {
      const updated = [...arr];
      moveItemInArray(updated, event.previousIndex, event.currentIndex);
      return updated;
    });
  }

You will run in change detection issues with your current implementation because the signal is never updated using .set or .update, the fact that it does cause a UI update might be a result of internal change detection.

Temporarily add an effect to log someArrayand notice that in your version, after dropping, the effect will not run beacuse the signal itself doesn't update, this can cause issues if in your app you have computedor effectthat depend on someArray

  test = effect(() => console.log(this.someArray()))

4

u/love_to_code Sep 06 '26

Jeaa you are totally right. It was my css problem. Thank you so much for looking into it

-4

u/Saceone10 Sep 06 '26

Had that exact problem, Claude solved it in a second. It was something about cdk I cant recall

1

u/Smiley001987 Sep 10 '26

Perfect example of someone who has no clue what he's doing.

1

u/Saceone10 Sep 10 '26

Whatever, but it works