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

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

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

компонент 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;
}

Любые идеи?


angular angular-cdk angular-cdk-drag-drop
person Smokovsky    schedule 03.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

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

person BartoszTermena    schedule 03.03.2020
comment
Ну с этим еще проблема. У меня та же проблема, что и в вашем примере: давайте перетащим большой блок на маленький блок - маленький блок находится внутри большого элемента, а не сверху или снизу. НО при перетаскивании в другой контейнер - отлично работает, только не для того же контейнера. Любое исправление для этого? - person Smokovsky; 03.03.2020
comment
(* почти идеально - при перетаскивании в другой контейнер не может опускаться на более низкие позиции, чем высота списка перетаскивания, до появления заполнителя) - person Smokovsky; 03.03.2020
comment
Когда я устанавливаю статическую высоту в ngStyle, она все еще не работает. Только использование style=123px заставляет его работать правильно... Но как использовать эту переменную в классическом атрибуте стиля html? - person Smokovsky; 03.03.2020