角度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-sample.ts