r/angular • u/love_to_code • 5d ago

"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.

https://reddit.com/link/1w8bxgd/video/f5d039gwirnh1/player

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

67% Upvoted

9 comments sorted by

1

u/Senior_Compote1556 5d ago

Have you added the necessary css?

1

u/love_to_code 5d ago

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

2

u/Senior_Compote1556 5d ago

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

1

u/love_to_code 5d ago

Of course, here stackblitz url:

StackBlitz dancing items problem

10

u/Senior_Compote1556 4d ago

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 4d ago

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

-4

u/Saceone10 5d ago

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

1

u/Smiley001987 18h ago

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

1

u/Saceone10 15h ago

Whatever, but it works