容器旋转时角度CDK拖放错误的拖动方向

问题描述

我正在对像游戏这样的棋子进行拖放操作，一切工作正常……直到棋盘旋转，然后所有dnd和实现都被破坏了：当我将一块拖到顶部时，该块会落到底部，当向左拖动时，将向右移动。

问题的样本代码 https://stackblitz.com/edit/angular-h3xixz?file=src%2Fstyles.scss

这是css的碎片，破坏了dnd的行为，但是我确实需要在游戏中旋转板子。

.basic-container {
  padding: 30px;
  transform: rotate(180deg);
}

我不想放弃@ angular / cdk实现，但是也许我别无选择，我会发疯了。

更新

为了更清楚地说明这个问题，我附上一个带有动画的示例来旋转容器。我已经有一个解决方法，我将在答案中分享。

https://stackblitz.com/edit/angular-h3xixz-2t148v

解决方法

而不是在CSS中使用转换，而是在HTML中使用这种方式-

<div class="example-box" cdkDrag>
  <div style="transform:rotate(180deg)">
      Drag me around
  </div>
</div>

在您的CSS-

中

.basic-container {
  padding: 30px;
  
}

希望这行得通！

,

好吧，我找到了解决方法，它覆盖了由Angular CDK库处理的本机HTML元素的属性 style.transform ，基本上，我更改了转换符号以恢复它，乘以-1。

我的解决方法如下：

dragMoved(ev: CdkDragMove) {
  if (this.isRotated) {
    const [origX,origY] = this.elementRef.nativeElement.firstChild.style.transform.match(/-*\d+px/g);
    const newX = parseInt(origX,10) * -1;
    const newY = parseInt(origY,10) * -1;

    this.elementRef.nativeElement.firstChild.style.transform = `translate3d(${newX}px,${newY}px,0px)`;
  }
}