Angular cdk 拖放 - 动态占位符高度

Question

我想将占位符高度设置为拖动元素的高度。

现在我使用最小可能元素高度的静态高度占位符。我找不到任何关于如何做到这一点的信息，现在不知道。

组件 html

<div class="taskList" cdkDropList id="{{ 'cdk-task-drop-list-' + categoryId }}" [cdkDropListData]="taskList"
[cdkDropListConnectedTo]="categoryIdList" (cdkDropListDropped)="onDrop($event)">
    <ng-container *ngIf="task.isApproved || task.authorId===userId || userAccessLevel >= 3">
        <div class="placeholder" *cdkDragPlaceholder></div>
        <div class="task">
            ...
        </div>
    </ng-container>
</div>

css

.placeholder{
    position: relative;
    margin-top: 1px; 
    margin-bottom: 5px;
    min-height: 75px;
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    vertical-align: middle;
}

有任何想法吗？

Answer 1

尝试获取拖动元素的高度，并在此基础上更改占位符高度。

cdkDragStarted(event:any){
   this.height = event.source.element.nativeElement.offsetHeight
}

HTML:

<div  class="example-box"  *ngFor="let movie of movies; let i = index"  (cdkDragStarted)="cdkDragStarted($event)" cdkDrag >
    <div [ngStyle]="{'min-height.px':height  }" class="example-custom-placeholder" *cdkDragPlaceholder></div>
    {{movie}}
</div>

这是我的例子: https://stackblitz.com/edit/angular-zhdujp-kppghs?file=src/app/cdk-drag-drop-custom-placeholder-example.ts