Почему анимация 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);
}
Никаких ошибок и предупреждений нет.