Estoy codificado para arrastrar y soltar en material angular y el elemento soltado debería estar en la tarjeta correcta, así que tomé el índice de la tarjeta y solté el elemento usando el mouseover. Ahora el problema es que la pestaña no funciona porque touchstart solo toma el índice después de tocar la tarjeta. ¿Hay alguna opción para hacerlo de manera correcta?

 <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>