angular - 无法在以前隐藏的 cdkDropList 中删除元素

Question

当我开始拖动元素时，我会显示放置的目标容器并更改原始容器的大小以将位置留给放置区域。

发生的情况是，正在考虑的原始容器的大小是拖动开始时的大小。

当我放下我的元素时，他被放在原始容器中。

<div cdkDropListGroup>
  <div class="list-container" [ngClass]="{ 'on-drag': dragStartEtat }" id="baseList" cdkDropList
    [cdkDropListData]="list1" #baseList="cdkDropList" (cdkDropListDropped)="drop($event)">
    <div class="line" (cdkDragStarted)="dragStart($event)" (cdkDragEnded)="dragEnd($event)" cdkDrag
      *ngFor="let e of list1">{{ e }}</div>
  </div>

  <div [hidden]="!dragStartEtat" #archive="cdkDropList"  cdkDropList  class="cdk-archive"
    (cdkDropListDropped)="dropArchive($event)">
    Glissez déposez pour archiver
  </div>
</div>

.list-container {
    min-height: calc(100vh - 325px);
    max-height: calc(100vh - 325px);
    overflow: auto;
}

.dessus {
    background-color: orange;
    min-height: 300px;
    max-height: 300px;
}

.cdk-archive {
    color: white;
    transition: 0.5s;
    text-align: center;
    height: 15vh;
    background-color: rgba(74, 74, 74, 0.8);

    .cdk-drag-placeholder {
        display: none !important;
    }
}

.on-drag {
    min-height: calc(100vh - (325px + 15vh))!important;
    max-height: calc(100vh - (325px + 15vh))!important; 
    overflow: auto;  
}

drop(event) {
    console.log('drop');
}

dropArchive(event) {
    console.log('dropArchive');
}

dragStart(event: CdkDragStart) {
    this.dragStartEtat = true;
}

dragEnd(event) {
    this.dragStartEtat = false;
}

如果从一开始就显示目标容器，则没有问题。

预期的是 dropArchive 在“归档”区域中被触发时被触发。然而，“baseList”的下降仍然是被触发的。

有什么我做错了或解决此行为的解决方案吗？

这是完整的工作示例：https ://stackblitz.com/edit/hidden-drop-zone

标签： angulardrag-and-dropangular-cdk