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

问题描述

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

stackblitz drag and rotate example

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

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

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.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.2,1);
  Box-shadow: 0 3px 1px -2px rgba(0,0.2),0 2px 2px 0 rgba(0,0.14),0 1px 5px 0 rgba(0,0.12);
}

.example-Box:active {
  Box-shadow: 0 5px 5px -3px rgba(0,0 8px 10px 1px rgba(0,0 3px 14px 2px rgba(0,0.12);
}

.example-boundary {
  width: 300px;
  height: 500px;
  max-width: 100%;
  border: dotted #ccc 2px;
}

非常感谢您提前

解决方法

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

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

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

编辑回顾：

在模板中，我用一个可拖动的 div 包裹了可旋转的 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;
  }
}

,

好吧，我想您已经猜到了，拖动操作会干扰框样式，每次拖动框时，您之前的旋转值都会丢失。但是，与此同时，您还通过用新的旋转值覆盖其当前值来弄乱框样式，因此每次旋转框时框位置都会不断重置（删除 {{1} } 值).

您可以通过获取元素的当前样式并在设置回来之前将其与您的样式合并来轻松修复代码，这将解决位置问题，但再次拖动框时仍然会丢失旋转值。

好消息是这个错误已经有一个 open issue 和一个 proposed fix，但坏消息是它们仍然是开放的。