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>

cdkDrag删除后如何获得位置？

3 个答案: