Cdk Drag Drop reordering smaller against larger items produce flickering effect

93 Views Asked by At

When using CdkDragDrop for reordering items with different sizes (e.g. width for horizontal orientation) in a container with greater height then of the elements there is a flickering effects. CdkDragDrop moves larger item really quickly from one side to another.

Example: https://stackblitz.com/edit/angular-fhqz1h?file=src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.css,src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.ts,src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.html

Try to drag "Iron age" over empty space in container against some wider item (e.g. "Early modern period")

Example uses angular 12, but in angular 17 it works the same.

Tried to use cdkDropListSortPredicate but it doesn't help.

0

There are 0 best solutions below