Angular15+Bootstrap5实现可拖拽重叠div的问题求助

我正在开发Angular 15 + Bootstrap 5项目，需要实现两个div，可拖拽下方div垂直向上重叠上方div以增大其尺寸。目前已完成大致功能，但拖拽时下方div呈透明状态，背景色受内部内容影响。

HTML代码 #

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <div class="container-fluid">
    ..... First Header title .....
  </div>
</nav>

<nav class="navbar navbar-expand-lg bg-primary fixed-top" style="margin-top: 40px;">
  <div class="container-fluid">
    ..... su title.....
  </div>
</nav>

<div class="ct-body" [style.height.px]='height' contenteditable="true" style="margin-top: 80px;">
    questo è il corpo dell'applicazione
    <div class="grabber"></div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    <!-- 省略重复文本内容 -->
  </div>
  <div class="container-fluid bg-light">
    questa è la parte sottostante invece.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    <!-- 省略重复文本内容 -->
</div>

CSS代码 #

.ct-body {
    min-height: 150px;
    border:1px solid #ddd;
    padding:15px;
    position:relative;
 }

 .ct-body .grabber{
    content: '';
    position: absolute;
    bottom: 0;
    margin-left: -15px;
    cursor: s-resize;
    height: 9px;
    width: 100%;
    border-top: 1px solid #f1f1f1;
    overflow: hidden;
    background-color: #eff0f1;
    /* 注释的背景图代码 */
    background-position: 210px -364px;
    background-size: initial;
    background-repeat: no-repeat;
 }

TypeScript代码（app.component.ts） #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'call-trace';

  height = 450;
  y = 100;
  oldY = 0;
  grabber = false;

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.grabber) {
        return;
    }
    this.resizer(event.clientY - this.oldY);
    this.oldY = event.clientY;
  }

  @HostListener('document:mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    this.grabber = false;
  }

  @HostListener('document:mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    this.grabber = true;
    this.oldY = event.clientY;
  }

  resizer(offsetY: number) {
    this.height += offsetY;
  }
}

问题解决方法 #

1. 修复背景透明问题
   当前.ct-body未设置背景色，导致下方div内容透出。修改CSS添加背景色并设置层级：

.ct-body {
    min-height: 150px;
    border:1px solid #ddd;
    padding:15px;
    position:relative;
    background-color: #ffffff; /* 添加不透明背景 */
    z-index: 1; /* 确保上层div覆盖下层 */
 }

2. 优化拖拽触发范围
   全局监听mousedown会导致点击任意区域都触发拖拽，改为仅在grabber元素上绑定事件：

• HTML修改：

<div class="grabber" (mousedown)="onMouseDown($event)"></div>

• TypeScript移除全局监听：

// 删除这行全局监听
// @HostListener('document:mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
  this.grabber = true;
  this.oldY = event.clientY;
  event.preventDefault();
}

3. 限制拖拽高度范围
   防止.ct-body高度过小或超出可视区域，修改resizer方法：

resizer(offsetY: number) {
  const newHeight = this.height + offsetY;
  // 最小高度150px，最大高度减去头部预留空间
  this.height = Math.max(150, Math.min(newHeight, window.innerHeight - 100));
}

内容的提问来源于stack exchange，提问作者Marco Mancini