为什么从Angular CDK拖放更新其X位置值后，HTML元素X位置值加倍（x2）？

Question

我有一个具有以下角色的 HTML 元素：

1. 每当 Obsarbalve 发出一个新值时，自动在正 x 水平移动。
2. 通过拖放在正负 x 水平上手动移动。

第二个角色是使用Angular拖放CDK实现的。并且在释放拖拽动作时出现问题(cdkDragReleased)

释放拖动时调用以下函数：

onDragEnd(e: CdkDragRelease){
    let newosistion =  e.source.element.nativeElement.getClientRects().item(0).left;

    this.facade.setBehaviorSubject(newposistion);
  }

setBehaviorSubject 将更新 Observable 的下一个值，从而根据上面提到的第一个角色更新元素的值。

最终的结果是有一个加倍的位置 x 值。 （拖动的值 + 可观察的值）

我需要获取用户释放元素的实际值。如何防止这种行为？

Answer 1

我找到了原因！

由于 Angular 拖放 CDK 应用了属性 transform: translate3d(x,y,z) 为了移动元素，我不得不在使用 CdkDragEnd 的方法中重置转换属性

  onDragEnd(e: CdkDragEnd) {
    e.source._dragRef.reset();
  }