Блог

У меня проблема: я хочу получить положение элемента в виде значений. Например, x = 10 и y = 30. После этого я хочу использовать их для обновления положения элемента в следующий раз. Как и прежде, элемент A находился в позиции x = 5 и y = 5. Затем я перетаскиваю позицию и получаю позиции x = 10 и y = 30. Затем я устанавливаю позицию в следующий раз и обновляю позицию. Пожалуйста, помогите!

Вот пример использования getBoundingClientRect() Stackblitz для получения всех необходимых данных, и вот код:

.ts :

 import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  AfterContentChecked,
AfterViewChecked
} from "@angular/core";

/**
 * @title Basic Dragamp;Drop
 */
@Component({
  selector: "cdk-drag-drop-overview-example",
  templateUrl: "cdk-drag-drop-overview-example.html",
  styleUrls: ["cdk-drag-drop-overview-example.css"]
})
export class CdkDragDropOverviewExample implements AfterViewChecked {
  @ViewChild("block") block: ElementRef;

  constructor() {}
  
  ngAfterViewChecked() {
    let datas = this.block.nativeElement.getBoundingClientRect();
    console.log("datas = ", datas);
  }

  onDrop(item: any) {
    console.log("item = ", item.target.getBoundingClientRect());
  }
}
  

.html :

 <div class="example-box" cdkDrag #block (mouseup)="onDrop($event)">
  Drag me around
</div>
  

.css :

 .example-box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
}
  

Обратите внимание, что для этого используется cdkDrasg из Angular (я привел пример из stackblitz документации), поэтому вам нужно будет немного адаптироваться, если вы используете что-то другое для функции перетаскивания.

Кроме того, планируете ли вы редактировать положение вручную (с помощью typescript), рассмотрите возможность использования Renderer2 вместо непосредственного использования ViewChild.