在使用角CDK拖动的拖动元素上失去旋转位置

Question

我试图用范围滑块旋转元素，但每次我拖动元素时，它都会在拖动时失去旋转的值，并且它还会改变框的位置并将其放在开始处。我正在附加一个链接到我在stackblitz中创建的一个简单的测试项目，这样我就可以重新创建我所遇到的问题。

stackblitz拖动和旋转示例

谁能指导我解决这个问题?

我把代码放在这里，以防有人不能很好地工作到测试项目的链接:

app.module.ts

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

app.component.ts

import { Component, Renderer2 } 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(private renderer: Renderer2) {}
setRotate(value: string) {
this.rotateValue = Number(value);
this.renderer.setStyle(
document.querySelector(".example-box"),
"transform",
`rotate(${this.rotateValue}deg)`
);
}
}

app.component.html

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

app.component.css

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

提前谢谢你

Answer 1

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

在我看来，最简单的解决方法是将旋转的元素包裹在一个可拖动的包装器中。

更新后的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>

为box-draggable-wrapper添加一点CSS:

.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;
}
}

Answer 2

好吧，我想你已经猜到了，拖动操作是混乱的框的样式，并且每次您拖动框，您之前的旋转值丢失。但是，与此同时，通过用新的旋转值覆盖其当前值，您也会干扰框样式，因此，每次旋转框时，框位置都会重置(您删除translate3D值)。

你可以很容易地修复你的代码，获取元素的当前样式，并在设置它之前将其与你的合并，这将解决位置问题，但你仍然会失去旋转值当你再次拖动框。

好消息是这个错误已经有一个公开的问题和一个建议的修复，但坏消息是它们仍然是开放的。