web-dev-qa-db-fra.com

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

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 un stackblitz de base configuré à https://stackblitz.com/edit/material-6-mjrhg1 , mais il n'affichera pas l'objet d'événement complet dans la console ("objet trop grand" ). Dans mon application réelle, je peux parcourir l'intégralité de l'objet événement, mais je ne trouve aucune propriété décrivant les nouveaux emplacements 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 a le plus de sens pour moi.

Avez-vous des idées sur la propriété à vérifier pour trouver les coordonnées x et y, ou devrais-je utiliser un autre événement/approche?

drag-and-dropangular-materialangular-material-7
4
Tim

Vous pouvez accéder à l'élément qui est déplacé depuis la propriété source sur votre événement CdkDragEnd.

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é ici .

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é extraite de this 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.

6
Fabian Küng