Angular cdk drap drop - dynamic placeholder height

Question

I want to set the placeholder height to height of dragging element.

For now I'm using static height placeholder of smallest possible element height. I couldn't find any informations about how to do it and for now having no idea.

component 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;
}

Any ideas?

Morocco

Answer 1

Try to get height of dragging element, and based on this, change placeholder height.

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>

Here is my example: https://stackblitz.com/edit/angular-zhdujp-kppghs?file=src/app/cdk-drag-drop-custom-placeholder-example.ts

Melodramatize

Well there is still an issue with this. I got the same problem which is in your example: let's drag big box over a small box - small box is inside big element, not on top or bottom of. BUT when dragging to another container - works perfectly, just not for the same container. Any fix for this? – Morocco

(* almoast perfectly - when dropping to another container, cannot drop at lower positions then drop list height was, before placeholder appeared) – Morocco

When I'm setting static height in ngStyle, it's still broken. Only using style="123px" makes it work right... But how to use this variable in classic html style attribute? – Morocco