9
votes

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

Bonjour, j'ai besoin de pouvoir faire glisser et déposer certains éléments html, mais j'ai besoin de connaître la position de fin de la dépose.

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

Voici mon modèle:

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

Le rappel est:

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

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 je reçois le message d'erreur lorsque je compile.

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

angular drag-and-drop draggable

0 commentaires

3 Réponses :

6
votes

La solution que j'ai trouvée est de récupérer la valeur style.transform que cdkDrag a défini

dragEnd(event: CdkDragEnd) {
    this.offset = { ...(<any>event.source._dragRef)._passiveTransform };

    this.position.x = this.initialPosition.x + this.offset.x;
    this.position.y = this.initialPosition.y + this.offset.y;

    console.log(this.position, this.initialPosition, this.offset);
  }

ou:

XXX

Existe-t-il un meilleur moyen d'obtenir ces valeurs de transformation x et y sans utiliser de variables privées?

Modifier: La fonctionnalité sera ajoutée dans https://github.com/angular/material2/pull/14696

1 commentaires

Salut, j'essaie de comprendre qu'il se passe. Je peux voir qu'il y a une position initiale qui n'est pas modifiée, mais qui est utilisée pour définir le placement des éléments. Cependant, lors du glisser-déposer, la position est calculée mais elle ne met pas à jour la position initiale (qui est utilisée pour la diapositive). J'ai essayé de mettre à jour initialPosition et j'ai trouvé que l'élément sautait, donc je ne suis pas sûr de ce qui se passe.

2
votes

Une autre solution que j'utilise pour obtenir la position de l'élément glissé après le dépôt est:

Modèle

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

  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 });
  }

Réglage de la position

Il est possible que vous souhaitiez afficher quelque chose lorsque le glissement se termine.

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

2 commentaires

Je dois essayer cela, je ne pense pas que ce soit très différent de l'utilisation de _passiveTransform , au moins distance était censée être publique

Comment avez-vous établi la position après cela?

12
votes

Utilisez simplement source.getFreeDragPosition () dans l'événement (getFreeDragPosition) comme ceci:

dragEnd($event: CdkDragEnd) {
    console.log($event.source.getFreeDragPosition());
}`

0 commentaires