Change the height of a dragged item before drop using angular material drag and drop

2
votes

I tried to change the height of the dragged object using angular material drag and drop. I have tried to change the class name of the dragged div using cdkdragstart event and adjusted the height in the 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);
   }
}

I tried to get the dragged index using drag started method and assigned the index to the variable and change the class name in html file based on the condition.

app.component.css

.reduceHeight{
    height:27px!important;
}

.show{
    display: block!important;
}

.hide{
    display: none!important;
}

Here the problem is, height is not getting changed while dropping the item. I want to change the height of the dragged object on start of the drag event. Is there any event is available in angular material drag and drop to change the height of the dragged object?

1
cssangularangular-materialdrag-and-dropangular-cdk
Are you trying to show different height during drag and normal height once drag is complete? - Nikhil Walvekar
No I need to change the height of the dragged object during drag and the changed height should be there while drop - nataraj sarath
you can check following question. stackoverflow.com/questions/61846413/… - ganggaroo
So, is not possible to modify a DOM element when is dragging? I'm trying just to add a class but is not taking effect when I'm dragging the item... - BruneX

1 Answers