拖动矩形同步滚动线条失效：矩形无法移动问题求助（附代码）

你的代码存在几个关键问题导致拖动功能失效，以下是修复方案：

问题分析 #

• 矩形未绑定mousedown事件：点击矩形时不会触发onMouseDown，isMouseDown始终为false，mousemove中的拖动逻辑永远不会执行。
• mousemove绑定在矩形上：拖动过程中鼠标移出矩形后，事件会中断，导致拖动不连贯。
• mouseup未全局绑定：若鼠标在矩形外松开，isMouseDown会一直保持true，后续拖动逻辑会异常。
• 容器宽度获取不可靠：event.target['clientWidth']在mousemove时可能指向矩形而非容器，导致边界计算错误。

修复后的代码 #

TypeScript 代码 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  positionX: number = 0;
  isMouseDown: boolean = false;
  initialMouseX: number = 0;
  initialPositionX: number = 0;
  @ViewChild('container') container!: ElementRef;

  onMouseDown(event: MouseEvent) {
    this.isMouseDown = true;
    this.initialMouseX = event.clientX;
    this.initialPositionX = this.positionX;
    // 绑定全局mousemove和mouseup事件
    document.addEventListener('mousemove', this.onMouseMove.bind(this));
    document.addEventListener('mouseup', this.onMouseUp.bind(this));
  }

  onMouseUp() {
    this.isMouseDown = false;
    // 移除全局事件监听
    document.removeEventListener('mousemove', this.onMouseMove.bind(this));
    document.removeEventListener('mouseup', this.onMouseUp.bind(this));
  }

  onMouseMove(event: MouseEvent) {
    if (this.isMouseDown && this.container) {
      const containerWidth = this.container.nativeElement.clientWidth;
      const rectangleWidth = event.target['clientWidth'];
      const mouseX = event.clientX;

      // 计算新位置，同时限制矩形不会超出容器（减去自身宽度）
      const newPositionX = this.initialPositionX + (mouseX - this.initialMouseX);
      this.positionX = Math.max(0, Math.min(containerWidth - rectangleWidth, newPositionX));
    }
  }
}

HTML 代码 #

<div #container class="container">
  <div class="line">
    <div
      class="rectangle"
      [style.left.px]="positionX"
      (mousedown)="onMouseDown($event)"
    ></div>
  </div>
</div>

关键修改说明 #

• 给矩形添加(mousedown)="onMouseDown($event)"事件绑定，触发拖动开始逻辑。
• 将mousemove和mouseup事件绑定到document上，确保拖动过程中即使鼠标移出矩形也能持续响应，松开鼠标时正确重置状态。
• 使用@ViewChild获取容器元素，可靠获取容器宽度；同时计算边界时减去矩形自身宽度，避免矩形超出容器范围。
• 在onMouseUp中移除全局事件监听，防止内存泄漏。

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