Angular Material 7 Drag and Drop coordonnées x et y

Question

J'ai un conteneur avec un élément à l'intérieur. Je veux pouvoir faire glisser l'élément vers un autre emplacement à l'intérieur du conteneur et voir les nouvelles coordonnées x et y (où x=0 et y=0 est le coin supérieur gauche du conteneur).

J'ai mis en place un stackblitz de base à https://stackblitz.com/edit/material-6-mjrhg1 mais il n'affiche pas l'objet entier de l'événement dans la console ("objet trop grand"). Dans mon application actuelle, je peux examiner l'ensemble de l'objet événement, mais je ne trouve aucune propriété décrivant les nouvelles positions x et y.

La configuration de base est la suivante :

<div style="height: 200px; width=200px; background-color: yellow" class="container">
  <div 
    style="height: 20px; width: 20px; background-color: red; z-index: 10" 
    cdkDrag 
    cdkDragBoundary=".container"
    (cdkDragEnded)="onDragEnded($event)">
  </div>
</div>

J'ai également essayé certains des autres événements, mais cdkDragEnded est le plus logique pour moi.

Avez-vous une idée de la propriété à vérifier pour trouver les coordonnées x et y, ou devrais-je utiliser un événement / une approche différente ?

Answer 1

Vous pouvez accéder à l'élément qui est glissé à partir de l'interface de l'utilisateur. source sur votre CdkDragEnd événement.

onDragEnded(event) {
  let element = event.source.getRootElement();
  let boundingClientRect = element.getBoundingClientRect();
  let parentPosition = this.getPosition(element);
  console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y: ' + (boundingClientRect.y - parentPosition.top));        
}

getPosition(el) {
  let x = 0;
  let y = 0;
  while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: y, left: x };
}

J'ai modifié le stackblitz pour enregistrer les coordonnées x et y du rectangle déplacé. aquí .

Pour résoudre le problème où le rectangle à déplacer est contenu dans un autre élément, nous utilisons la fonction getPosition (qui a été reprise de ce stackoverflow post) pour récupérer les valeurs haut/gauche de l'élément contenant, ce qui nous permet ensuite de calculer correctement les coordonnées x/y.