Question

我尝试使用有角度的材质拖放来更改拖动对象的高度。我尝试使用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

app.component.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);
   }
}

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

app.component.css

.reduceHeight{
    height:27px!important;
}

.show{
    display: block!important;
}

.hide{
    display: none!important;
}

这里的问题是，放下物品时高度不会改变。我想在拖动事件开始时更改被拖动对象的高度。角度材料拖放中是否有任何事件可以更改被拖动对象的高度？

Answer 1

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

使用角度材质拖放，在拖放之前更改被拖动项目的高度

1 个答案: