垂直调整div大小的Angular 9指令正在调整疯狂的速度

问题描述

我遇到了一个非常奇怪的问题，显然我无法复制。我创建了一个简单的指令。在页面的右侧，在我们的一个主要着陆页上，我将彼此叠放2个div，顶部将显示一张地图，底部将在垫子表格中显示搜索结果。该指令似乎有效，但是行为是这样的：当我开始向下拖动顶部div时，相对于div调整大小/变高，鼠标越跳越远。我得到的页面越深，顶部div更改高度的速度越慢，鼠标相对于调整大小向下向前移动的速度就越快（与向上拖动相同）。我创建了一个stackblitz希望能够得到相同的行为，但是stackblitz可以正常工作，这正是我在应用程序中所需要的，但是在实际应用程序上使用Chrome仍然运行缓慢。

有没有人经历过/为什么在鼠标向下/向上拖动和div的实际大小调整之间有这么长的延迟时间？

Stackblitz（工作方式就像我希望在我的应用程序中==）：https://stackblitz.com/edit/angular-ivy-zwhmjl?file=src%2Fapp%2Fresizable-div.directive.ts

这是我的指令：

import {AfterViewInit,Directive,ElementRef,HostListener,OnDestroy} from '@angular/core';
import {fromEvent,Subject} from 'rxjs';
import {takeuntil} from 'rxjs/operators';

@Directive({
  selector: '[appResizableDiv]'
})
export class ResizableDivDirective implements AfterViewInit,OnDestroy {
  topContainer: HTMLElement;
  draggableBar: HTMLElement;
  height: number;
  oldY = 0;
  canResize = false;
  destroy$ = new Subject();

  constructor(private el: ElementRef) { }

  ngAfterViewInit(): void {
    if (this.el) {
      this.topContainer = document.getElementById('resizable-container');
      this.draggableBar = document.getElementById('draggable-bar');
      this.height = parseInt((this.topContainer.offsetHeight).toString(),10);
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  @HostListener('mousedown',['$event'])
  onMouseDown(event: MouseEvent) {
    event.preventDefault();
    const target = event.target as HTMLdivelement;
    this.oldY = event.clientY;
    if (target.className.includes('drag-target')) {
       this.canResize = true;
       this.addMouseMoveListener();
    }
    this.canResize = true;
    this.addMouseMoveListener();
  }

  @HostListener('mouseup',['$event'])
  onmouseup() {
    this.canResize = false;
    this.destroy$.next();
  }

  resize(offsetY: number): void {
    this.height += offsetY;
    this.topContainer.style.height = this.height + 'px';
  }

  addMouseMoveListener(): void {
    fromEvent(document,'mousemove').pipe(
      takeuntil(this.destroy$)
    ).subscribe(this.mouseMoveCallback.bind(this));
  }

  mouseMoveCallback(event: MouseEvent): void {
    console.log('Y: ',event.clientY);
    if (!this.canResize) {
      return;
    }
    if (event.clientY >= 730) {
      this.resize(730 - this.oldY);
      this.oldY = 730;
    } else {
      this.resize(event.clientY - this.oldY);
      this.oldY = event.clientY;
    }
  }
}

请注意，我还创建了一个完全响应的版本（这是我提交PR之前要做的，虽然可以，但是与使用主机侦听器的行为完全一样）任何想法都将不胜感激，谢谢

编辑：我只是使用firefox尝试了stackblitz，对我来说，它实际上给出了chrome本地给出的奇怪行为……。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular angular-directive resize