Winkelmaterial – Element an neue Position verschieben

Question

Ich benötige Hilfe beim Ziehen und Ablegen von eckigem Material

Die Idee ist, dass ich einen schwarzen Block auf dem Bildschirm entlang der Y-Achse verschieben kann, dafür verwende ich Angular Material Drag & Drop, dafür habe ich 3 Methoden onDragMoved, onDragStart, onDragEnd. Wenn ich die Maustaste loslasse, füge ich 100 Pixel zur Höhe hinzu, und wenn ich den Block zum zweiten Mal bewegen möchte, sollte er sich dort bewegen, wo er beim letzten Mal angehalten hat, aber das passiert nicht, aus irgendeinem Grund tritt das Zucken auf < /p>

Das betreffende Video – https://dropmefiles.com/0XFU6

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


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

  onDragStart(event: CdkDragMove) {
    console.log('Meine Rechte');
    console.log(event.distance)
  }

  onDragEnd(event: CdkDragMove) {
    console.log('Meine Antworten');
    console.log(Ereignis)

    const y = event.distance.y + 100; // 100
    const element = event.source.element.nativeElement;
    element.style.transform = `translate3d(0, ${y}px, 0)`; // CSS-Transformation
    element.style.height = this.originalHeight + 'px';

    event.distance.y = y;
    this.qwwqwqw = y;
  }

<div class="example-box" cdkDrag (cdkDragMoved)="onDragMoved($event)" )="onDragStart($event)" (cdkDragEnded)="onDragEnd($event)">
  Koordinaten: {{ posX }}, {{ posY }}
</div>

[Bildbeschreibung hier eingeben](https://i.stack.imgur.com/RmWP2.png)

Ich habe das Debuggen versucht, ich habe die neuen Koordinaten an die onDragMoved-Methode übergeben, aber im zweiten Fall wurden sie auf einige zufällige Koordinaten aktualisiert

Answer 1

使用[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 }
}