Question

我在一个带有<div>的容器中有一个position: absolute元素，其中有position: relative。其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的左和顶部绑定到后端属性，则可以在dragEnd事件上计算新坐标，应用它们，并重置cdk生成的transform属性。一切正常。

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

我认为一种解决方案可能是检查CdkDragEnd event是否包含相对于转换起点的数据并将其重置，但是我什么也没找到。

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

谢谢你们

Answer 1

我不久前也遇到了这个问题。经过大量时间在互联网上浏览以重置transform属性的方法后，我一无所获。

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

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

我所做的是，

创建两个字段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的值，以便下次进行组件初始化。

Answer 2

在发生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();
    }
  }

在“角度材质拖放”中重置变换偏移量

2 个答案: