如何通过cdkDrag获取放下后的位置？

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

只需在

source.getFreeDragPosition()

事件中使用

(getFreeDragPosition)

，如下所示：

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

Answer 2

我找到的解决方案是检索

style.transform

设置的

cdkDrag

值

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 3

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

模板

<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 4

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

onDrop（事件：CdkDragEnd）：无效{ console.log('拖动事件.....',event.dropPoint,event.dropPoint.x, event.dropPoint.y); }