使用角度材料拖放更改拖放前拖动项目的高度答案

【问题标题】：Change the height of a dragged item before drop using angular material drag and drop使用角度材料拖放更改拖放前拖动项目的高度
【发布时间】：2019-12-29 17:06:47
【问题描述】：

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

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

【问题讨论】：

您是否尝试在拖动过程中显示不同的高度和拖动完成后的正常高度？
不，我需要在拖动过程中更改被拖动对象的高度，并且在放置时更改的高度应该在那里
您可以查看以下问题。 stackoverflow.com/questions/61846413/…
那么，拖拽时不能修改DOM元素吗？我只是想添加一个类，但在拖动项目时没有生效...

标签： css angular angular-material drag-and-drop angular-cdk

【解决方案1】：

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

【讨论】：

没有自定义拖动预览不同，它只会在拖动时展示预览。在我的情况下，我需要更改拖动对象的高度并放下具有更改高度的项目。