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

无法在先前隐藏的cdkDropList中删除元素

0 个答案: