1

我正在像游戏这样的跳棋上实现拖放，一切正常......直到棋盘旋转，然后所有 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

4

2 回答 2

1

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

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

在你的 CSS-

.basic-container {
  padding: 30px;
  
}

希望这有效！

于 2020-11-01T10:39:47.050 回答
0

好吧，我找到了一个解决方法，覆盖使用 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)`;
  }
}
于 2020-11-16T18:12:12.990 回答