Matériau angulaire - Déplacer l'élément vers un nouvel emplacement

Question

J'ai besoin d'aide pour le glisser-déposer de matériaux angulaires

L'idée est que je peux déplacer un bloc noir sur l'écran le long de l'axe Y, pour cela j'utilise le glisser-déposer Angular Material, pour cela j'ai 3 méthodes onDragMoved, onDragStart, onDragEnd. Lorsque je relâche la souris, j'ajouterai 100 px à la hauteur et lorsque je veux commencer à déplacer le bloc pour la deuxième fois, il devrait commencer à bouger de l'endroit où il s'est arrêté la dernière fois, mais cela ne se produit pas, pour une raison quelconque, les contractions se produisent < /p>

La vidéo en question - https://dropmefiles.com/0XFU6

onDragMoved(événement : CdkDragMove) {
    console.log('движемся')
    console.log (événement)
    console.log('neeeew coord', this.qwwqwqw)


    // if(this.qwwqwqw != null && event != null) {
      // événement.distance.y = this.qwwqwqw
      // event.pointerPosition.y = this.qwwqwqw
      // this.qwwqwqw = null ;
    // }
    
  }

  onDragStart (événement : CdkDragMove) {
    console.log('Кнопка мыши зажата');
    console.log(événement.distance)
  }

  onDragEnd (événement : CdkDragMove) {
    console.log('Кнопка мыши отпущена');
    console.log (événement)

    const y = événement.distance.y + 100 ; // 100
    const element = event.source.element.nativeElement;
    element.style.transform = `translate3d(0, ${y}px, 0)`; // Transformation CSS
    element.style.height = this.originalHeight + 'px'; // vous avez votre bloc

    événement.distance.y = y;
    ceci.qwwqwqw = y;
  }</pré>
<pre class="brush:php;toolbar:false;"><div class="example-box" cdkDragLockAxis="y" cdkDrag (cdkDragMoved)="onDragMoved($event)" (cdkDragStarted) )="onDragStart($événement)" (cdkDragEnded)="onDragEnd($événement)">
  Coordonnées : {{ posX }}, {{ posY }}
</div>

[Entrez la description de l'image ici](https://i.stack.imgur.com/RmWP2.png)

J'ai essayé le débogage, j'ai transmis les nouvelles coordonnées à la méthode onDragMoved, mais dans le deuxième événement, elles ont été mises à jour avec des coordonnées aléatoires

Answer 1

Utilisez l'attribut [cdkDragFreeDragPosition]

HTML :

<div class="example-box" cdkDragLockAxis="y" cdkDrag [cdkDragFreeDragPosition]="dragPosition" (cdkDragEnded)="onDragEnd($event)">
    Координаты: {{ posX }}, {{ posY }}
</div>

TS :

dragPosition = { x: 0, y: 0 };

onDragEnd(event: CdkDragMove) {
    this.dragPosition = { x: event.distance.x, y: event.distance.y + 100 }
}