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

【问题标题】：Angular CDK drag and drop wrong drag direction when container rotates容器旋转时角度CDK拖放错误的拖动方向
【发布时间】：2020-11-01 01:50:07
【问题描述】：

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

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

这是打破dnd行为的css片段，但我确实需要在游戏过程中动态地旋转棋盘。

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

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

更新

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

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

【问题讨论】：

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

【解决方案1】：

不要在 CSS 中使用 transform，而是在 HTML 中像这样使用-

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

在你的 CSS-

.basic-container {
  padding: 30px;
  
}

希望这行得通！

【讨论】：

谢谢，但我在 cdkDrag 元素的容器中应用了变换，而不仅仅是 cdkDrag 元素，因为那是我需要旋转的：板，而不是棋子。 ```

把我拖过去

```

【解决方案2】：

好吧，我找到了一个解决方法，覆盖使用 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)`;
  }
}

【讨论】：