Angular Material - 요소를 새 위치로 이동

Question

Angular 머티리얼 드래그 앤 드롭에 대한 도움이 필요합니다

화면의 검은색 블록을 Y축을 따라 이동할 수 있다는 아이디어가 있습니다. 이를 위해 Angular Material 드래그 앤 드롭을 사용하고 있습니다. 이를 위해 onDragMoved, onDragStart, onDragEnd의 3가지 메서드가 있습니다. 마우스를 놓으면 높이에 100px을 추가하고 두 번째로 블록 이동을 시작하려고 할 때 지난번에 멈춘 위치에서 이동을 시작해야 하지만 이런 일은 발생하지 않습니다. 어떤 이유로 경련이 발생합니다 < /p>

문제의 동영상 - https://dropmefiles.com/0XFU6

onDragMoved(event: CdkDragMove) {
    console.log('движемся')
    console.log(이벤트)
    console.log('neeeeew coord', this.qwwqwqw)


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

  onDragStart(이벤트: CdkDragMove) {
    console.log('로그인 내용');
    console.log(event.distance)
  }

  onDragEnd(이벤트: CdkDragMove) {
    console.log('Кнопка мыши отпучена');
    console.log(이벤트)

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

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

  코드: {{ posX }}, {{ posY }}

Answer 1

[cdkDragFreeDragPosition] 속성을 사용하세요

HTML:

으아악

TS:

으아악