Почему анимация DragDrop не работает в материале?

Я использую драпирование / падение от DragDropModule.

Когда я падаю, я вызываю функцию ниже и вижу console.log внутри:

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

Это дает мне правильные данные от / до.

Но элемент не перемещается, также не работает анимация.

Шаблон:

<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"
        (click)="select(app)"
        cdkDrag
    >
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{ app.value }}
    </div>
</div>

Стили CSS:

.order__application__list {
    min-height: 300px;
    display: block;
    overflow: hidden;
}

.order__application__list__item_selected {
    background: #8e24aa !important;
    color: #fff;
    border: 1px solid #8e24aa !important;
}

.order__application__list__item {
    padding: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: move;
    background: #f9f9f9;
    border-radius: 2px;
    border: 1px solid #999999;
    font-size: 14px;
    margin-bottom: 3px;
    font-weight: bold;
}

.order__application__list__item:not(.order__application__list__item_selected):hover {
    background: #fff;
}

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

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Никаких ошибок и предупреждений нет.

0 ответов

Другие вопросы по тегам