Estoy tratando de obtener la posición de un elemento arrastrable mientras se mueve, pero no puedo encontrar ningún atributo que funcione con CdkDragMove.
Plantilla HTML
<div cdkDropList [cdkDropListData]="day.lunch" [cdkDropListConnectedTo]="dropTargetIds" class="example-list" (cdkDropListDropped)="drop($event)" (cdkDragMoved)="dragMoved($event)" // <--- Error (see below) > //Actual content </div>Mecanografiado
dragMoved(event:CdkDragMove<any>){ // get PosX & PosY } drop(event: CdkDragDrop<Recipe[]>) { // other stuff }me sale este error:
El argumento de tipo 'Evento' no se puede asignar al parámetro de tipo 'CdkDragMove'. Al tipo 'Evento' le faltan las siguientes propiedades del tipo 'CdkDragMove': fuente, posición del puntero, evento, distancia, deltangtsc
También probé con dragMoved en lugar de $event pero luego obtengo esto
El argumento de tipo '(evento: CdkDragMove) => void' no se puede asignar al parámetro de tipo 'CdkDragMove'. Al tipo '(event: CdkDragMove) => void' le faltan las siguientes propiedades del tipo 'CdkDragMove': fuente, posición del puntero, evento, distancia, delta
No puedo entender esto, porque el evento está trabajando en la función de soltar en su lugar. ¿Algunas ideas?
Resuelto
Descubrí que el (cdkDragMoved)="dragMoved($event)" tenía que colocarse en el elemento cdkDrag , y no en el elemento cdkDropList .
<div cdkDropList [cdkDropListData]="day.lunch" [cdkDropListConnectedTo]="dropTargetIds" class="example-list" (cdkDropListDropped)="drop($event)" // It was here > <mat-chip-list class="mat-chip-list-stacked" > <mat-chip cdkDrag (cdkDragMoved)="dragMoved($event)"> //<--- Must be Here // content </mat-chip> </mat-chip-list> </div>Como dice el mensaje de error, debe agregar un Tipo para decirle a cdkDragMoved qué se está moviendo. Como ya hiciste para drop:
dragMoved(event:CdkDragMove<Recipe[]>){ // get PosX & PosY }Consulte la documentación: https://material.angular.io/cdk/drag-drop/api