使用角度调整元素大小

Question

我想制作两个可以水平调整大小的可拉伸矩形（左右）。但是我当前代码的问题是，一旦我调整第一个矩形（红色）的大小，第二个矩形（蓝色）会自动跳转到第一个矩形的初始位置。请帮我解决这个问题。 我将我的代码与输出图像一起附加。

html 文件：

<div class="rectangle" [ngStyle]="style" mwlResizable [validateResize]="validate" 
[enableGhostResize]="true" 
[resizeSnapGrid]="{ left: 1, right: 1 }"  (resizeEnd)="onResizeEnd($event)">
<div class="resize-handle-left" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
<div class="resize-handle-right" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
</div>

<div class="rectangle1" [ngStyle]="style1" mwlResizable [validateResize]="validate1" 
[enableGhostResize]="true" 
[resizeSnapGrid]="{ left: 1, right: 1 }" (resizeEnd)="onResizeEnd1($event)">
<div class="resize-handle-left1" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
<div class="resize-handle-right1" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
</div>

css 文件：

.rectangle {
 position: relative;
 width: 50px;
 height: 50px;
 border-radius: 10px;
 background-color: red;
 }
.rectangle1 {
 position: relative;
 width: 50px;
 height: 50px;
 border-radius: 10px;
 background-color: blue;
 }
.resize-handle-left,
.resize-handle-right {
 position: absolute;
 height: 50px;
 cursor: col-resize;
 width: 5px;
 }
 .resize-handle-left {
 left: 0;
 }
.resize-handle-right {
 right: 0;
 }
.resize-handle-left1,
.resize-handle-right1 {
 position: absolute;
 height: 50px;
 cursor: col-resize;
 width: 5px;
 }
 .resize-handle-left1 {
 left: 0;
 }
.resize-handle-right1 {
 right: 0;
 }

.ts 文件：

import { Component } from '@angular/core';
import { ResizeEvent } from 'angular-resizable-element';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {
constructor() { }

public style: object = {};
public style1: object = {};

validate(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
  event.rectangle.width &&
  event.rectangle.height &&
  (event.rectangle.width < MIN_DIMENSIONS_PX ||
    event.rectangle.height < MIN_DIMENSIONS_PX)
   ) {
  return false;
 }
return true;
}

validate1(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
  event.rectangle.width &&
  event.rectangle.height &&
  (event.rectangle.width < MIN_DIMENSIONS_PX ||
    event.rectangle.height < MIN_DIMENSIONS_PX)
  ) {
  return false;
  }
return true;
}

onResizeEnd(event: ResizeEvent): void {
this.style = {
  position: 'fixed',
  left: `${event.rectangle.left}px`,
  top: `${event.rectangle.top}px`,
  width: `${event.rectangle.width}px`,
  height: `${event.rectangle.height}px`
  };
 }

 onResizeEnd1(event: ResizeEvent): void {
 this.style1 = {
  position: 'fixed',
  left: `${event.rectangle.left}px`,
  top: `${event.rectangle.top}px`,
  width: `${event.rectangle.width}px`,
  height: `${event.rectangle.height}px`
  };
 }
}

链接到输出：

On refreshing my page

problem with resizing

Answer 1

删除css属性top和position

import { Component } from '@angular/core';
import { ResizeEvent } from 'angular-resizable-element';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

public style: object = {};
public style1: object = {};

validate(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
  event.rectangle.width &&
  event.rectangle.height &&
  (event.rectangle.width < MIN_DIMENSIONS_PX ||
    event.rectangle.height < MIN_DIMENSIONS_PX)
   ) {
  return false;
 }
return true;
}

validate1(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
  event.rectangle.width &&
  event.rectangle.height &&
  (event.rectangle.width < MIN_DIMENSIONS_PX ||
    event.rectangle.height < MIN_DIMENSIONS_PX)
  ) {
  return false;
  }
return true;
}

onResizeEnd(event: ResizeEvent): void {
this.style = {

  left: `${event.rectangle.left-8}px`,
  width: `${event.rectangle.width}px`,
  height: `${event.rectangle.height}px`
  };
 }

 onResizeEnd1(event: ResizeEvent): void {
 this.style1 = {
  left: `${event.rectangle.left-8}px`,
  width: `${event.rectangle.width}px`,
  height: `${event.rectangle.height}px`
  };
 }
}

Answer 2

resizeEnd 是两个矩形的相同事件。因此，当它触发附加到此事件的函数时，将被调用。在您的代码中 功能：- onResizeEnd 和 onResizeEnd1 必须一起调用 当 resizeEnd 事件发生并且另一个矩形的值 已重置。

---

尝试为两个矩形创建单独的事件。

如果这有帮助，请告诉我。