Bahan Sudut - Alihkan elemen ke lokasi baharu

Question

Saya memerlukan bantuan dengan seret dan lepas bahan Sudut

Ideanya ialah saya boleh menggerakkan blok hitam pada skrin di sepanjang paksi Y, untuk ini saya menggunakan seret dan lepas Bahan Sudut, untuk ini saya mempunyai 3 kaedah onDragMoved, onDragStart, onDragEnd. Apabila saya melepaskan tetikus saya akan menambah 100px pada ketinggian dan apabila saya ingin mula mengalihkan blok untuk kali kedua ia harus mula bergerak dari tempat ia berhenti kali terakhir tetapi ini tidak berlaku, atas sebab tertentu kedutan berlaku < /p>

Video berkenaan - https://dropmefiles.com/0XFU6

onDragMoved(acara: CdkDragMove) {
    console.log('движемся')
    console.log(event)
    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(acara: CdkDragMove) {
    console.log('Кнопка мыши зажата');
    console.log(event.distance)
  }

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

    const y = event.distance.y + 100;
    elemen const = event.source.element.nativeElement;
    element.style.transform = `translate3d(0, ${y}px, 0)`; // CSS-трансформации
    element.style.height = this.originalHeight + 'px'; // восстанавливаем исходную высоту блока

    peristiwa.jarak.y = y;
    ini.qwwqwqw = y;
  }

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

[Masukkan penerangan imej di sini](https://i.stack.imgur.com/RmWP2.png)

Saya cuba menyahpepijat, saya menghantar koordinat baharu kepada kaedah onDragMoved, tetapi dalam kejadian kedua, ia telah dikemas kini kepada beberapa koordinat rawak

Answer 1

Gunakan atribut [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 }
}