Comment obtenir la position après une chute avec cdkDrag?

Question

Salut, je dois pouvoir faire glisser et déposer des éléments html mais j'ai besoin de connaître la position finale de la goutte.

en utilisant la directive cdkDrag je vois dans le docs qu'il y a un événement cdkDragEnded.

Voici mon modèle:

<div cdkDrop>
  <div cdkDrag (cdkDragEnded)="dragEnd($event)">
    ...other stuff
  </div>
</div>

Le rappel est:

dragEnd(event: CdkDragEnd) {
  console.log(event);
}

Dans la console, j'ai trouvé ce dont j'avais besoin mais c'est une propriété privée de l'événement event.source._dragRef._passiveTransform et j'obtiens le message d'erreur lors de la compilation.

Savez-vous si ces données ou autre chose que je peux utiliser sont exposées d'une manière ou d'une autre?

Answer 1

Une autre solution que j'utilise pour obtenir la position de l'élément déplacé après la chute est:

modèle

<div
  cdkDrag
  (cdkDragEnded)="dragEnded($event)"
>
</div>

Composant

  dragEnded($event: CdkDragEnd) {
    const { offsetLeft, offsetTop } = $event.source.element.nativeElement;
    const { x, y } = $event.distance;
    this.positionX = offsetLeft + x;
    this.positionY = offsetTop + y;
    this.showPopup = true;
    console.log({ positionX, positionY });
  }

Position de réglage

Il y a des cas où vous voudrez peut-être afficher quelque chose une fois le glissement terminé.

<div
  *ngIf="showPopup"
  [ngStyle]="{
    'left': positionX + 'px',
    'right': positionY + 'px'
  }"
>
  I'm in position!
</div>