css - 使用 Angular Material 拖放在放下之前更改拖动元素的高度

Question

我尝试使用 Angular Material 拖放来更改被拖动对象的高度。我尝试使用 cdkdragstart 事件更改拖动的 div 的类名并调整 css 中的高度。

app.component.html

<div cdkDropList #nameDragDrop="cdkDropList" [cdkDropListData]="names" [cdkDropListConnectedTo]="['nameTime']" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let iteration = index" cdkDrag (cdkDragMoved)="dragStarted($event,iteration)" (cdkDragEnded)="dragEnded(iteration)">
        <div class="nameDiv" [ngClass]="{'reduceHeight': hideImageIcon === iteration, 'scenes': hideImageIcon !== iteration }">
        </div>   
    </div>
</div

应用程序组件.ts

dragStarted(event,index:any) {
    this.hideImageIcon = index;
}

drop(event: CdkDragDrop<String[]>) {
   if (event.previousContainer.id === event.container.id) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
   } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
   }
}

我尝试使用 drag started 方法获取拖动的索引并将索引分配给变量并根据条件更改 html 文件中的类名。

应用程序组件.css

.reduceHeight{
    height:27px!important;
}

.show{
    display: block!important;
}

.hide{
    display: none!important;
}

这里的问题是，放下元素时高度没有改变。我想在拖动事件开始时更改拖动对象的高度。 Angular material拖放有没有事件可以改变被拖物体的高度？

Answer 1

自定义拖动预览如何https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-preview