重置角度材质拖放中的变换偏移答案

【问题标题】：Reset transform offset in Angular Material Drag and Drop重置角度材质拖放中的变换偏移
【发布时间】：2020-04-11 13:29:50
【问题描述】：

我在带有position: relative 的容器内有一个带有position: absolute 的<div> 元素。它的left 和top 属性绑定到component.ts 中的数据X 和Y。我的目的是使用 cdk 拖放移动容器内的 div。

在dragEnded 事件中，我检索了更新坐标 X 和 Y 所需的数据，因此问题开始了……

<div
    class="character"
    [style.left.px]="x"
    [style.top.px]="y"
    cdkDrag
    cdkDragBoundary=".grid-container"
    (cdkDragEnded)="dragEnded($event, c)"
  ></div>

我注意到 cdk 拖放应用属性 transform: translate3d(x,y,z) 以便从原始位置开始移动我的 div。所以，如果我想让我的 div left 和 top 绑定到我的后端属性，我可以在 dragEnd 事件上计算新坐标，应用它们，然后重置由 cdk 生成的变换属性。一切正常。

但是下次我拖动元素时，材质不会从我的 div 的新绝对位置开始应用变换，而是从原始位置开始。

我认为一种解决方案可能是检查CdkDragEnd event 是否包含与转换起点相关的数据并将其重置，但我没有找到任何东西。

知道这个属性是否隐藏在 CdkDragEvent 的某个地方吗？或者有其他解决这个问题的方法吗？

谢谢大家

【问题讨论】：

标签： angular drag-and-drop angular-cdk

【解决方案1】：

在采用CdkDragEnd 事件的方法中，您可以使用event.source._dragRef.reset(); 重置转换属性。示例：

public dragEnded(event: CdkDragEnd): void {
    if (this.dragEnd.type === "cell" && this.dragStart.type !== "cell") {
      this.moveFromList1To2(event.source.element.nativeElement.id);
      event.source._dragRef.reset();
    }
  }

【讨论】：

谢谢，“event.source._dragRef.reset();”此代码工作正常

【解决方案2】：

我不久前也遇到过这个问题。在网上冲浪了很多时间以寻找重置transform 属性的方法后，我什么也没得到。

您似乎无法重置transform 属性。不管你做什么，drag-div 的最终位置将通过总结最新的top、left 和transform 属性来计算。

我的解决方案不是动态更改元素的left 和top 属性，而是通过(cdkDragEnded) 事件发射器跟踪x 和y 值

我所做的是，

创建两个字段xInitial = x 和yInitial = y 来存储要拖动的div 的初始坐标

最初使用这些初始坐标为您呈现div；

<div
    class="character"
    [style.left.px]="xInitial"
    [style.top.px]="yInitial"
    cdkDrag
    cdkDragBoundary=".grid-container"
    (cdkDragEnded)="dragEnded($event, c)"
></div>

修改dragEnded($event, c)以跟踪被拖动div的实际位置

dragEnded(event, c) {
     let element = event.source.getRootElement();
     let newPos = element.getBoundingClientRect();

     this.x = newPos.x;
     this.y = newPos.y;
}

最后保存this.x和this.y的值，以便下次初始化组件。

【讨论】：