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?

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?

• javascript
• angular-material
• drag-and-drop

3 Answers 3

I got this error when I had failed to import the DragDropModule into my module.

import { DragDropModule } from '@angular/cdk/drag-drop';

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