如何使用JavaScript实现Div从所有边缘而非仅右下角调整大小

没问题！CSS自带的resize: both确实只能支持右下角拖拽，要实现**所有边缘（包括四个角）**都能调整大小，我们得用JavaScript手动监听鼠标事件来处理拖拽逻辑。结合你给出的Angular代码，我给你一套完整的实现方案：

首先给每个widget元素添加鼠标事件监听，同时绑定尺寸和位置的动态样式：

<div style="padding-right:25px; height: 100%; width:100%" (dragover)="allowDrop($event)" (drop)="onDrop($event)">
  <div *ngFor="let widget of widgets" 
       [id]="widget.id" 
       class="test"
       [style.width.px]="widget.width"
       [style.height.px]="widget.height"
       [style.left.px]="widget.left"
       [style.top.px]="widget.top"
       (mousedown)="startResize($event, widget)"
       (mousemove)="onResizeMove($event, widget); updateCursor($event, widget)"
       (mouseup)="stopResize(widget)"
       (mouseleave)="stopResize(widget)">
  </div>
</div>

在你的Angular组件类中，添加以下状态变量和函数来处理拖拽逻辑：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  widgets = [
    // 示例widget，确保每个widget有id、width、height、left、top属性
    { id: 'widget1', width: 300, height: 200, left: 50, top: 50 },
    { id: 'widget2', width: 300, height: 200, left: 400, top: 50 }
  ];

  private isResizing = false;
  private resizeDir: 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | null = null;
  private initialMousePos: { x: number, y: number } = { x: 0, y: 0 };
  private initialWidgetSize: { width: number, height: number } = { width: 0, height: 0 };
  private initialWidgetPos: { x: number, y: number } = { x: 0, y: 0 };

  // 开始拖拽：判断鼠标按下的位置属于哪个边缘/角
  startResize(event: MouseEvent, widget: any) {
    const element = document.getElementById(widget.id);
    if (!element) return;

    const rect = element.getBoundingClientRect();
    const edgeThreshold = 10; // 边缘检测阈值（px），鼠标离边缘这么近就触发拖拽

    const isTop = event.clientY <= rect.top + edgeThreshold;
    const isBottom = event.clientY >= rect.bottom - edgeThreshold;
    const isLeft = event.clientX <= rect.left + edgeThreshold;
    const isRight = event.clientX >= rect.right - edgeThreshold;

    // 确定拖拽方向
    if (isTop && isLeft) this.resizeDir = 'top-left';
    else if (isTop && isRight) this.resizeDir = 'top-right';
    else if (isBottom && isLeft) this.resizeDir = 'bottom-left';
    else if (isBottom && isRight) this.resizeDir = 'bottom-right';
    else if (isTop) this.resizeDir = 'top';
    else if (isBottom) this.resizeDir = 'bottom';
    else if (isLeft) this.resizeDir = 'left';
    else if (isRight) this.resizeDir = 'right';
    else return; // 不在边缘区域，不触发拖拽

    this.isResizing = true;
    this.initialMousePos = { x: event.clientX, y: event.clientY };
    this.initialWidgetSize = { width: rect.width, height: rect.height };
    this.initialWidgetPos = { x: rect.left, y: rect.top };

    event.preventDefault(); // 防止选中文本或触发其他默认行为
  }

  // 拖拽过程中：计算并更新元素尺寸和位置
  onResizeMove(event: MouseEvent, widget: any) {
    if (!this.isResizing || !this.resizeDir) return;

    const element = document.getElementById(widget.id);
    if (!element) return;

    const deltaX = event.clientX - this.initialMousePos.x;
    const deltaY = event.clientY - this.initialMousePos.y;

    let newWidth = this.initialWidgetSize.width;
    let newHeight = this.initialWidgetSize.height;
    let newLeft = this.initialWidgetPos.x;
    let newTop = this.initialWidgetPos.y;

    // 根据拖拽方向计算新的尺寸和位置
    switch (this.resizeDir) {
      case 'top':
        newHeight = this.initialWidgetSize.height - deltaY;
        newTop = this.initialWidgetPos.y + deltaY;
        break;
      case 'right':
        newWidth = this.initialWidgetSize.width + deltaX;
        break;
      case 'bottom':
        newHeight = this.initialWidgetSize.height + deltaY;
        break;
      case 'left':
        newWidth = this.initialWidgetSize.width - deltaX;
        newLeft = this.initialWidgetPos.x + deltaX;
        break;
      case 'top-left':
        newWidth = this.initialWidgetSize.width - deltaX;
        newHeight = this.initialWidgetSize.height - deltaY;
        newLeft = this.initialWidgetPos.x + deltaX;
        newTop = this.initialWidgetPos.y + deltaY;
        break;
      case 'top-right':
        newWidth = this.initialWidgetSize.width + deltaX;
        newHeight = this.initialWidgetSize.height - deltaY;
        newTop = this.initialWidgetPos.y + deltaY;
        break;
      case 'bottom-left':
        newWidth = this.initialWidgetSize.width - deltaX;
        newHeight = this.initialWidgetSize.height + deltaY;
        newLeft = this.initialWidgetPos.x + deltaX;
        break;
      case 'bottom-right':
        newWidth = this.initialWidgetSize.width + deltaX;
        newHeight = this.initialWidgetSize.height + deltaY;
        break;
    }

    // 设置最小尺寸，避免元素被拖得太小
    const minWidth = 100;
    const minHeight = 100;
    newWidth = Math.max(newWidth, minWidth);
    newHeight = Math.max(newHeight, minHeight);

    // 更新元素样式
    element.style.width = `${newWidth}px`;
    element.style.height = `${newHeight}px`;
    element.style.left = `${newLeft}px`;
    element.style.top = `${newTop}px`;
  }

  // 结束拖拽：保存状态并重置拖拽标记
  stopResize(widget: any) {
    this.isResizing = false;
    const element = document.getElementById(widget.id);
    if (element) {
      const rect = element.getBoundingClientRect();
      // 更新widget的属性，保存拖拽后的状态
      widget.width = rect.width;
      widget.height = rect.height;
      widget.left = rect.left;
      widget.top = rect.top;
    }
    this.resizeDir = null;
  }

  // 更新鼠标光标样式，提升用户体验
  updateCursor(event: MouseEvent, widget: any) {
    const element = document.getElementById(widget.id);
    if (!element) return;

    const rect = element.getBoundingClientRect();
    const edgeThreshold = 10;

    const isTop = event.clientY <= rect.top + edgeThreshold;
    const isBottom = event.clientY >= rect.bottom - edgeThreshold;
    const isLeft = event.clientX <= rect.left + edgeThreshold;
    const isRight = event.clientX >= rect.right - edgeThreshold;

    // 先移除所有光标类
    element.classList.remove(
      'top-edge', 'right-edge', 'bottom-edge', 'left-edge',
      'top-left-corner', 'top-right-corner', 'bottom-left-corner', 'bottom-right-corner'
    );

    // 添加对应方向的光标类
    if (isTop && isLeft) element.classList.add('top-left-corner');
    else if (isTop && isRight) element.classList.add('top-right-corner');
    else if (isBottom && isLeft) element.classList.add('bottom-left-corner');
    else if (isBottom && isRight) element.classList.add('bottom-right-corner');
    else if (isTop) element.classList.add('top-edge');
    else if (isBottom) element.classList.add('bottom-edge');
    else if (isLeft) element.classList.add('left-edge');
    else if (isRight) element.classList.add('right-edge');
  }

  // 你的其他函数：allowDrop、onDrop
  allowDrop(event: DragEvent) {
    event.preventDefault();
  }

  onDrop(event: DragEvent) {
    event.preventDefault();
    // 你的拖拽放置逻辑
  }
}

移除原来的resize: both，添加光标样式类，让用户能直观看到可拖拽的方向：

.test {
  position: absolute;
  z-index: 9;
  background-color: lightblue;
  text-align: center;
  border: 2px solid #d3d3d3;
  padding: 20px;
  display: block;
  overflow: auto;
  /* 移除默认的resize属性 */
}

/* 不同方向的光标样式 */
.test:hover {
  cursor: default;
}
.test.top-edge:hover, .test.bottom-edge:hover {
  cursor: ns-resize; /* 上下拖拽光标 */
}
.test.left-edge:hover, .test.right-edge:hover {
  cursor: ew-resize; /* 左右拖拽光标 */
}
.test.top-left-corner:hover, .test.bottom-right-corner:hover {
  cursor: nwse-resize; /* 左上-右下拖拽光标 */
}
.test.top-right-corner:hover, .test.bottom-left-corner:hover {
  cursor: nesw-resize; /* 右上-左下拖拽光标 */
}

• 边缘检测阈值：可以调整edgeThreshold的值，数值越大，用户越容易触发边缘拖拽。
• 最小尺寸：通过minWidth和minHeight限制元素的最小大小，避免拖拽到无法操作的程度。
• 状态保存：拖拽结束后会把最新的尺寸和位置保存到widget对象中，确保组件重新渲染时不会丢失调整后的状态。

内容的提问来源于stack exchange，提问作者sandeep saini