Why does DragDrop work in one component and not in another?

Question

Angular

I have a component like this:

import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { OrderApplicationUI } from '../../models/application.list.model';
import { ListService } from '../../services/sorting.service';

@Component({
    selector: 'app-order-applications-list',
    templateUrl: './order-applications-list.component.html',
    styleUrls: ['./order-applications-list.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [ListService],
})
export class OrderApplicationsListComponent implements OnInit {
    @Input() applications: OrderApplicationUI[] = [];
    @Output() onSelected = new EventEmitter<OrderApplicationUI[]>();

    constructor(private listService: ListService) {}

    ngOnInit(): void {
        this.listService.setItems(this.applications);
    }

    public drop(event: any): void {
        this.listService.drop(event);
    }

    public select(app: OrderApplicationUI): void {
        app.selected = !app.selected;
        this.onSelected.emit(this.applications.filter((app) => app.selected));
    }
}

Sample:

<div cdkDropList class="order__application__list" (cdkDropListDropped)="drop($event)">
    <div
        class="order__application__list__item"
        [ngClass]="{ order__application__list__item_selected: app.selected }"
        *ngFor="let app of applications; let i = index"
        (click)="select(app)"
        cdkDrag
    >
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{ app.value }}
    </div>
</div>
<div class="nodata" *ngIf="!applications || applications.length == 0">Нет данных</div>

Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderApplicationsListComponent } from './order-applications-list.component';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
    imports: [CommonModule, DragDropModule],
    declarations: [OrderApplicationsListComponent],
    exports: [OrderApplicationsListComponent],
})
export class OrderApplicationsListModule {}

Usage:

<app-order-applications-list  [applications]="block?.datasource?.value"></app-order-applications-list>

Why does this drag drop not work everywhere. More precisely, the drag methods are always called - in the console you can see which element is being moved and where. But the animation - showing the free space - does not work - where the element moves. And visually everything stays in place.

If you add a horizontal drag / drop to the same component, then it works:

<div cdkDrag cdkDragLockAxis="x">
  I'm Draggable
</div>

Answer 1

Oh, such things are difficult to analyze without having working code on hand. You say it works:

<div cdkDrag cdkDragLockAxis="x">
  I'm Draggable
</div>

- but this is not the same code as above in the working example. Where you have both styles superimposed, and there is a click handler, which may well conflict with the drag&drop mechanism. Try removing the handler and then replacing the click handling with a CdkDragStart event, but I can't be sure of the result. There is a variant of overlapping with styles, some element turns out to be higher, for example.