drop函数在转换结束后被调用。所以即使我转换了2000ms drop函数也会在转换结束后被调用，也就是2s后。这是预期的吗？我认为函数应该在鼠标释放后被调用。
是的，这是意料之中的。这是有技术背景的原因。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);
  }