Angular cdkDrag无cdkDropList时拖动容器无法滚动解决方案咨询

问题原因 #

Angular CDK的cdkDrag默认依赖cdkDropList处理滚动时的元素位置同步，未使用cdkDropList时，拖动元素的位置计算不会自动考虑容器的滚动偏移，导致滚动时元素与鼠标指针错位。

实现方案 #

通过手动监听容器滚动事件，实时补偿拖动元素的位置，具体步骤如下：

1. 模板结构 #

给滚动容器添加模板引用，给每个cdkDrag元素绑定拖动开始和结束事件：

<div #scrollContainer class="grid-container">
  <div *ngFor="let item of items" 
       cdkDrag 
       (cdkDragStarted)="onDragStarted($event)"
       (cdkDragEnded)="onDragEnded()">
    {{ item }}
  </div>
</div>

2. 组件逻辑 #

在组件中实现滚动监听与位置补偿逻辑：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { CdkDragStart, CdkDragEnd } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-grid',
  templateUrl: './drag-grid.component.html',
  styleUrls: ['./drag-grid.component.css']
})
export class DragGridComponent {
  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLElement>;
  items = Array.from({length: 20}, (_, i) => `Item ${i+1}`);
  private scrollListener?: () => void;
  private scrollOffset = { top: 0, left: 0 };

  onDragStarted(event: CdkDragStart) {
    // 记录拖动开始时的容器滚动位置
    this.scrollOffset = {
      top: this.scrollContainer.nativeElement.scrollTop,
      left: this.scrollContainer.nativeElement.scrollLeft
    };
    // 绑定容器滚动监听
    this.scrollListener = () => this.syncDragPosition(event);
    this.scrollContainer.nativeElement.addEventListener('scroll', this.scrollListener);
  }

  onDragEnded() {
    // 拖动结束后解绑滚动监听，避免内存泄漏
    if (this.scrollListener) {
      this.scrollContainer.nativeElement.removeEventListener('scroll', this.scrollListener);
      this.scrollListener = undefined;
    }
  }

  private syncDragPosition(event: CdkDragStart) {
    const container = this.scrollContainer.nativeElement;
    const currentScroll = {
      top: container.scrollTop,
      left: container.scrollLeft
    };
    // 计算滚动偏移差值
    const deltaTop = currentScroll.top - this.scrollOffset.top;
    const deltaLeft = currentScroll.left - this.scrollOffset.left;

    // 获取当前拖动元素的位置，补偿滚动偏移后重新设置
    const dragRef = event.source;
    const currentPos = dragRef.getFreeDragPosition();
    dragRef.setFreeDragPosition({
      x: currentPos.x + deltaLeft,
      y: currentPos.y + deltaTop
    });

    // 更新滚动偏移记录为当前值
    this.scrollOffset = currentScroll;
  }
}

3. 容器样式 #

确保容器设置可滚动样式：

.grid-container {
  width: 400px;
  height: 300px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, 120px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.cdk-drag {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #999;
  cursor: move;
}

原理说明 #

• 拖动开始时，记录容器初始滚动位置并绑定滚动事件监听。
• 容器滚动时，计算滚动前后的偏移差值，通过cdkDrag的setFreeDragPosition方法将差值加到元素当前位置，让元素跟随滚动偏移调整，保持与鼠标指针的相对位置。
• 拖动结束后解绑监听，避免不必要的性能消耗和内存泄漏。

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