使用 Angular CDK DRAG 丢失拖动元素上的旋转位置

Question

我正在尝试使用范围滑块旋转元素，但每次拖动元素时，它都会在拖动时丢失旋转值，并且还会更改框的位置并将其放置在开头。\n我正在附加指向我在 stackblitz 中创建的简单测试项目的链接，以便我可以重新创建我遇到的问题。

\n

stackblitz 拖动和旋转示例

\n

有人可以指导我解决方案吗？

\n

我将代码放在这里，以防有人无法正常工作测试项目的链接：

\n

应用程序模块.ts

\n

import { NgModule } from "@angular/core";\nimport { BrowserModule } from "@angular/platform-browser";\nimport { FormsModule } from "@angular/forms";\n\nimport { DragDropModule } from "@angular/cdk/drag-drop";\n\nimport { AppComponent } from "./app.component";\nimport { HelloComponent } from "./hello.component";\n\n@NgModule({\n  imports: [BrowserModule, FormsModule, DragDropModule],\n  declarations: [AppComponent, HelloComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n

\n

应用程序组件.ts

\n

import { Component, Renderer2 } from "@angular/core";\n\n@Component({\n  selector: "my-app",\n  templateUrl: "./app.component.html",\n  styleUrls: ["./app.component.css"]\n})\nexport class AppComponent {\n  rotateValue = 0;\n  dragPosition = { x: 0, y: 0 };\n\n  constructor(private renderer: Renderer2) {}\n\n  setRotate(value: string) {\n    this.rotateValue = Number(value);\n    this.renderer.setStyle(\n      document.querySelector(".example-box"),\n      "transform",\n      `rotate(${this.rotateValue}deg)`\n    );\n  }\n}\n

\n

应用程序组件.html

\n

<h1 class="text-center m-3">Drag And Drop Project</h1>\n<hr>\n\n<div class="row m-5">\n\n    <div class="col-sm-7">\n        <div class="example-boundary">\n            <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>\n                I can only be dragged within the dotted container\n            </div>\n        </div>\n    </div>\n\n    <div class="col-sm-5">\n        <h4>SETTINGS</h4>\n        <ul class="list-group mb-3">\n            <li class="list-group-item d-flex justify-content-between lh-condensed">\n                <div>\n                    <h6 class="my-0">Rotate the box</h6>\n                    <input #rotation\n                   type="range"\n                   class="custom-range  my-2"\n                    min="-150" max="150"\n                    [(ngModel)]="rotateValue"\n                   [value]=\'rotateValue\'\n                   (change)="setRotate(rotation.value)"\n                  >\n        </div>\n                    <span id="grados" class="text-muted">{{rotateValue}}\xc2\xba</span>\n            </li>\n\n        </ul>\n    </div>\n</div>\n

\n

应用程序组件.css

\n

.example-box {\n  width: 140px;\n  height: 140px;\n  border: solid 1px #ccc;\n  color: rgba(0, 0, 0, 0.87);\n  cursor: move;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  background: #fff;\n  border-radius: 4px;\n  margin-right: 25px;\n  position: relative;\n  z-index: 1;\n  box-sizing: border-box;\n  padding: 10px;\n  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);\n  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n    0 1px 5px 0 rgba(0, 0, 0, 0.12);\n}\n\n.example-box:active {\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n}\n\n.example-boundary {\n  width: 300px;\n  height: 500px;\n  max-width: 100%;\n  border: dotted #ccc 2px;\n}\n

\n

预先非常感谢

\n

Answer 1

您遇到的问题是 Cdk Drag 是使用 CSStransform规则实现的，与您的自定义旋转完全相同。因此，当应用于完全相同的 HTML 元素时，两者基本上是不兼容的。最后一个操作（拖动或旋转）会覆盖另一个操作。

IMO 最简单的解决方法是将旋转的元素包装在可拖动包装器内。

这里是更新的 StackBlitz： https://stackblitz.com/edit/angular-ivy-ynzavj

编辑回顾：

在模板中，我用一个可拖动的元素包裹了可旋转的 div（我还使用[ngStyle]并完全避免了直接 DOM 操作，这本身不是问题，但没有必要）：

<div class="example-boundary">
  <div class="box-draggable-wrapper" cdkDragBoundary=".example-boundary" cdkDrag>
    <div class="example-box" [ngStyle]="{'transform':'rotate(' + rotateValue + 'deg)'}" >
      I can only be dragged within the dotted container
    </div>
  </div>
</div>

只需一些 CSS 即可box-draggable-wrapper：

.box-draggable-wrapper {
  width: 140px;
  height: 140px;
  display: block;
  border: none;
}

组件被清除：

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  rotateValue = 0;
  dragPosition = { x: 0, y: 0 };

  constructor() {}

  setRotate(value: string) {
    this.rotateValue = +value;
  }
}