Html 使用角度调整元素大小

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

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>

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

从'@angular/core'导入{Component}；
从“角度可调整大小的元素”导入{ResizeEvent}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
构造函数（）{}
公共样式：object={}；
公共样式1:object={}；
验证（事件：ResizeEvent）：布尔值{
常数最小尺寸：数量=50；
如果(
event.rectangle.width&&
event.rectangle.height&&
（event.rectangle.width<最小尺寸||
event.rectangle.height<最小尺寸（像素）
) {
返回false；
}
返回true；
}
validate1（事件：ResizeEvent）：布尔值{
常数最小尺寸：数量=50；
如果(
event.rectangle.width&&
event.rectangle.height&&
（event.rectangle.width<最小尺寸||
event.rectangle.height<最小尺寸（像素）
) {
返回false；
}
返回true；
}
onResizeEnd（事件：ResizeEvent）：无效{
此.style={
位置：'固定'，
左：`${event.rectangle.left}px`，
top:`${event.rectangle.top}px`，
宽度：`${event.rectangle.width}px`，
高度：`${event.rectangle.height}px`
};
}
onResizeEnd1（事件：ResizeEvent）：无效{
此参数为0.style1={
位置：'固定'，
左：`${event.rectangle.left}px`，
top:`${event.rectangle.top}px`，
宽度：`${event.rectangle.width}px`，
高度：`${event.rectangle.height}px`
};
}
}

输出的链接：

---

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

---

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

---

让我知道这是否有用。

删除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`
  };
 }
}

从'@angular/core'导入{Component}；
从“角度可调整大小的元素”导入{ResizeEvent}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
公共样式：object={}；
公共样式1:object={}；
验证（事件：ResizeEvent）：布尔值{
常数最小尺寸：数量=50；
如果(
event.rectangle.width&&
event.rectangle.height&&
（event.rectangle.width<最小尺寸||
event.rectangle.height<最小尺寸（像素）
) {
返回false；
}
返回true；
}
validate1（事件：ResizeEvent）：布尔值{
常数最小尺寸：数量=50；
如果(
event.rectangle.width&&
event.rectangle.height&&
（event.rectangle.width<最小尺寸||
event.rectangle.height<最小尺寸（像素）
) {
返回false；
}
返回true；
}
onResizeEnd（事件：ResizeEvent）：无效{
此.style={
左：`${event.rectangle.left-8}px`，
宽度：`${event.rectangle.width}px`，
高度：`${event.rectangle.height}px`
};
}
onResizeEnd1（事件：ResizeEvent）：无效{
此参数为0.style1={
左：`${event.rectangle.left-8}px`，
宽度：`${event.rectangle.width}px`，
高度：`${event.rectangle.height}px`
};
}
}

因为我没有完整的代码，所以很难做到这一点。你能在StackBlitz上创建演示吗？它只是解决了我们当前的目的。当向左或向右滚动页面时，矩形的位置保持不变。现在如何解决这个问题？我已经更新了代码，现在它应该可以在滚动页面时工作

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