cdkDrag drop 后如何获取位置？

Question

嗨，我需要能够拖放一些 html 元素，但我需要知道拖放的结束位置。

使用 cdkDrag 指令我从 docs 中看到有一个事件 cdkDragEnded。

这是我的模板：

<div cdkDrop>
  <div cdkDrag (cdkDragEnded)="dragEnd($event)">
    ...other stuff
  </div>
</div>

回调为：

dragEnd(event: CdkDragEnd) {
  console.log(event);
}

在控制台中我找到了我需要的东西，但它是事件 event.source._dragRef._passiveTransform 的私有属性，我在编译时收到错误消息。

你知道这些数据或我可以使用的其他东西是否以某种方式暴露了吗？

Answer 1

我找到的解决方案是检索 cdkDrag 设置

的 style.transform 值

import { Component, ViewChild, ElementRef } from "@angular/core";
import { CdkDragEnd } from "@angular/cdk/drag-drop";

@Component({
  selector: "item",
  styles: [
    `
      .viewport {
        position: relative;
        background: #ccc;
        display: block;
        margin: auto;
      }
      .item {
        position: absolute;
        background: #aaa;
      }
    `
  ],
  template: `
    <div class="viewport" cdkDrop>
      <div
        #item
        class="item"
        cdkDrag
        (cdkDragEnded)="dragEnd($event)"
        [style.top.px]="initialPosition.y"
        [style.left.px]="initialPosition.x"
      >
        anything
      </div>
    </div>
  `
})
export class CanvasItemComponent {
  constructor() {}

  @ViewChild("item")
  item: ElementRef;

  initialPosition = { x: 100, y: 100 };
  position = { ...this.initialPosition };
  offset = { x: 0, y: 0 };

  dragEnd(event: CdkDragEnd) {
    const transform = this.item.nativeElement.style.transform;
    let regex = /translate3d\(\s?(?<x>[-]?\d*)px,\s?(?<y>[-]?\d*)px,\s?(?<z>[-]?\d*)px\)/;
    var values = regex.exec(transform);
    console.log(transform);
    this.offset = { x: parseInt(values[1]), y: parseInt(values[2]) };

    this.position.x = this.initialPosition.x + this.offset.x;
    this.position.y = this.initialPosition.y + this.offset.y;

    console.log(this.position, this.initialPosition, this.offset);
  }
}

或：

dragEnd(event: CdkDragEnd) {
    this.offset = { ...(<any>event.source._dragRef)._passiveTransform };

    this.position.x = this.initialPosition.x + this.offset.x;
    this.position.y = this.initialPosition.y + this.offset.y;

    console.log(this.position, this.initialPosition, this.offset);
  }

有没有更好的方法在不使用私有变量的情况下获得转换 x 和 y 值？

编辑： 该功能将在 https://github.com/angular/material2/pull/14696

中添加

Answer 2

我用来获取拖放项目拖放后位置的另一种解决方案是：

模板

<div
  cdkDrag
  (cdkDragEnded)="dragEnded($event)"
>
</div>

组件

  dragEnded($event: CdkDragEnd) {
    const { offsetLeft, offsetTop } = $event.source.element.nativeElement;
    const { x, y } = $event.distance;
    this.positionX = offsetLeft + x;
    this.positionY = offsetTop + y;
    this.showPopup = true;
    console.log({ positionX, positionY });
  }

设置位置

在某些情况下，您可能希望在拖动完成时显示一些内容。

<div
  *ngIf="showPopup"
  [ngStyle]="{
    'left': positionX + 'px',
    'right': positionY + 'px'
  }"
>
  I'm in position!
</div>

Answer 3

只需在 (getFreeDragPosition) 事件中使用 source.getFreeDragPosition()，如下所示：

dragEnd($event: CdkDragEnd) {
    console.log($event.source.getFreeDragPosition());
}

cdkDrag drop 后如何获取位置？

How to get the position after drop with cdkDrag?

drag-and-drop

draggable

angular