Angular dragover css on item in recursive calling list item component

I have an angular component in which it renders the navigation list items recursively. I want to implement drag and drop on every list item. And on drag over it should highlight particular item on which item is hovered.

Here is the code

<a [ngStyle]="{ 'padding-left': depth * 12 + 'px' }" [ngClass]="{
'app-drag-over': dragOverItem?.id === item?.id
}" class="nav-list-item" (drop)="onDrop($event, item)" (dragover)="onDragOver($event, item)"
(dragleave)="onDragLeave($event, item)">
<div *ngIf="!collapsed">
{{ item.displayName }}
</div>
<span *ngIf="item.children && item.children.length">
<i class="material-icons" [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'"> expand_more </i>
</span>
</a>
<div *ngIf="expanded">
<nav-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth + 1">
</nav-list-item>
</div>


and here is ts functions

onDragOver(event: DragEvent, item): void {
this.dragOverItem = item;
console.log("onDragOver ~ item:", item);
event.preventDefault();
}

onDragLeave(event: DragEvent, item): void {
this.dragOverItem = null;
console.log("onDragLeave ~ item:", item);
event.preventDefault();
}


i have added console logs in the drag functions but due to recursive rendering, i am getting too many calls in the events on drag due to which it is slowing down the browser and application and show tha border on item very late.

And if i move the dragged item to another, it is showing flicker and applying very late.

any solution on this?

Continue reading...