我已经实现了一个元素列表，可以通过角材质拖放功能进行拖放如教程https://material.angular.io/cdk/drag-drop/overview
我已经实现了函数drop(事件)，但在我的情况下，我不需要只是移动元素在角模型。我需要发送请求到服务器，当服务器的响应会来更新它。所以我的函数没有改变任何东西，它创建了对服务器的请求。
这里的问题是，因为角模型在drop函数中没有改变，所以有一个元素'跳跃';发生:元素掉落后，元素返回到原来的位置，当服务器响应并更新模型时，元素移动到新位置。对于用户来说看到
是非常痛苦的我想以某种方式对用户隐藏后台正在进行的工作。
- 的想法有重复的列表，这是为用户和另一个服务器和更新他们(用户列表在下降的时刻和服务器列表在响应的时刻)我离开了最后的决定，因为它很难维护。
我正在尝试用css动画来解决它。在拖放示例中可以看到，它使用
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
"过渡:transform"当用户放置元素时显示平滑的动画。所以我想向用户展示大约0.5s的动画。这个时间应该足够从服务器响应，当动画完成时，模型已经更新。
我看到的是
(cdkDropListDropped)="drop($event)"
转换结束后调用drop函数。所以即使我做了变换，在转换结束后，也就是在2s后，drop函数会被调用。这是意料之中的吗?我认为函数应该在鼠标释放后调用。
你对最初的问题(隐藏模型更新)和这个css动画过渡问题有什么想法吗?
更新:我为我的问题创造了一个例子https://stackblitz.com/edit/angular-3nhsxx?file=src%2Fapp%2Fcdk-drag-drop-disabled-sorting-example.css, src % 2 fapp % 2 fcdk-drag-drop-disabled-sorting-example.ts
在转换结束后调用drop函数。所以即使我做了变换，在转换结束后，也就是在2s后，drop函数会被调用。这是意料之中的吗?我认为函数应该在鼠标释放后调用。
是的，这是预期的。这样做的原因有技术背景。cdkDrag创建一个被拖动元素的深度拷贝，并将其他元素的位置设置为固定位置。如果拖拽完成(鼠标向上)，动画就开始了，当动画完成时，Angular会"诉诸"。该项目进行了良好的过渡。否则，元素将"跳转"。返回到开始订单，然后再到新订单。
你可以使用cdkDragReleased，直接在之前触发动画结束。我觉得这就是你想要的。Stackblitz更新
附加信息(容器、索引、项目)可以在cdkDragExited和cdkDragEntered中找到。详见官方文档。
演示:
<div cdkDropListGroup>
<div class="example-container">
<h2>Available items</h2>
<div
cdkDropList
id="test"
[cdkDropListData]="items"
class="example-list"
cdkDropListSortingDisabled
(cdkDropListDropped)="drop($event)"
>
<div class="example-box" *ngFor="let item of items" (cdkDragEntered)="cdkDropListEntered($event)"
(cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
</div>
</div>
<div class="example-container">
<h2>Shopping basket</h2>
<div
id="super"
cdkDropList
[cdkDropListData]="basket"
class="example-list"
(cdkDropListDropped)="drop($event)"
>
<div class="example-box" *ngFor="let item of basket" (cdkDragEntered)="cdkDropListEntered($event)"
(cdkDragExited)="cdkDropListExited($event)" (cdkDragReleased)="dragEnd($event)" cdkDrag>{{item}}</div>
</div>
</div>
</div>
dragEnd(event: any) {
console.log('End', event);
}
cdkDropListEntered(event: any) {
console.log(event);
}
cdkDropListExited(event: any) {
console.log(event);
}