I'm coded for drag and drop in angular material and dropped element should in correct hovered card , So I took index of card and drop the element using mouseover. Now the problem is for tab its not working because touchstart only take the index after touch the card.Is there any option to do that in correct way

<div class="xxl:m-2 m-1 xxl:rounded-xl rounded-lg xxl:min-h-24 min-h-14 bg-gray-400 bg-opacity-12
  (mouseover)="dropped(i)" (touchstart)="dropped(i)" >
          <div class="xxl:p-3 p-2">
                <div class="z-20 flex items-center justify-between xxl:py-3 py-1 xxl:px-4 px-2 xxl:my-2 my-1 cursor-move xxl:rounded-lg rounded-md  bg-card max-h-8 xxl:max-h-full"
                       *ngFor="let map of card.stages;" cdkDrag  [cdkDragData]="map" (mousedown)="getData(map)" (touchstart)="getData(map)">
                            <div class="min-w-0" >
                                <div class="font-medium leading-5 truncate">{{map.stage_name}}</div>
                                </div>
                                <button mat-icon-button (click)="cutStage(map)">
                                    <mat-icon class="xxl:icon-size-6 icon-size-5 " svgIcon="heroicons_outline:x-circle"></mat-icon>
                                </button>
                            </div>
                        </div>
                    </div>