I'm trying to get the position of a draggable element as it's moved around, but I can't find any attribute that works with CdkDragMove.
HTML Template
<div
cdkDropList
[cdkDropListData]="day.lunch"
[cdkDropListConnectedTo]="dropTargetIds"
class="example-list"
(cdkDropListDropped)="drop($event)"
(cdkDragMoved)="dragMoved($event)" // <--- Error (see below)
>
//Actual content
</div>
TypeScript
dragMoved(event:CdkDragMove<any>){
// get PosX & PosY
}
drop(event: CdkDragDrop<Recipe[]>) {
// other stuff
}
I get this error:
Argument of type 'Event' is not assignable to parameter of type 'CdkDragMove'. Type 'Event' is missing the following properties from type 'CdkDragMove': source, pointerPosition, event, distance, deltangtsc
I also tried with dragMoved instead of $event but then I get this
Argument of type '(event: CdkDragMove) => void' is not assignable to parameter of type 'CdkDragMove'. Type '(event: CdkDragMove) => void' is missing the following properties from type 'CdkDragMove': source, pointerPosition, event, distance, delta
I can't get my head around this, 'cause the event is working on the drop function instead. Any Ideas?
Solved
I found out that the (cdkDragMoved)="dragMoved($event)" binding had to be placed at the cdkDrag element, and not at the cdkDropList element.
<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>
As the error message says you need to add a Type to tell the cdkDragMoved what is being moved. Like you already did for drop:
dragMoved(event:CdkDragMove<Recipe[]>){
// get PosX & PosY
}
See the Documentation: https://material.angular.io/cdk/drag-drop/api