Angular cdk drap drop - динамический c высота заполнителя - PullRequest
Новая
       3

Angular cdk drap drop - динамический c высота заполнителя

1 голос
/ 03 марта 2020

Я хочу установить высоту заполнителя на высоту перетаскиваемого элемента.

Сейчас я использую stati c заполнитель высоты наименьшей возможной высоты элемента. Я не смог найти никакой информации о том, как это сделать, и пока понятия не имею.

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

Есть идеи?

1 Ответ

1 голос
/ 03 марта 2020

Попробуйте получить высоту перетаскиваемого элемента и на основании этого измените высоту заполнителя. 

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 / приложение / CDK-перетаскивания-заказ заполнители-example.ts

...