Angular中如何实现可拖拽元素跨页面平滑移动并保持选中状态？

嘿，这个需求我之前用Angular CDK的拖拽功能处理过，刚好能给你分享下可行的实现思路和代码示例，一步步来：

核心逻辑梳理 #

本质上我们要做这几件事：

• 把每个页面设为可连接的cdkDropList容器，让拖拽元素能跨容器转移
• 实时监听拖拽位置，判断元素是否触达当前页面的上下边界
• 触发页面切换时，手动调整元素位置实现平滑过渡，同时保持拖拽激活状态
• 同步更新元素的所属页面信息，确保选中状态不丢失

1. 基础布局与CDK配置 #

首先，我们需要把每个页面作为独立的cdkDropList，并且让它们互相连接。拖拽元素绑定cdkDrag，并监听拖拽移动事件。

模板代码：

<!-- 页面滚动容器 -->
<div class="pages-wrapper" #pagesWrapper>
  <!-- 循环渲染所有页面 -->
  <div 
    *ngFor="let page of pages; let idx = index"
    class="page"
    cdkDropList
    [cdkDropListConnectedTo]="allDropLists"
    [cdkDropListData]="page"
    (cdkDropListDropped)="onDropComplete($event)"
  >
    <!-- 只有当前页面的拖拽元素才会渲染 -->
    <div 
      *ngIf="draggableItem.belongToPageId === page.id"
      class="draggable-card"
      cdkDrag
      (cdkDragMoved)="onDragMove($event, idx)"
      [cdkDragData]="draggableItem"
      #dragElement
    >
      {{ draggableItem.content }}
    </div>
  </div>
</div>

TS代码基础配置：

import { Component, ViewChildren, QueryList, ViewChild, ElementRef } from '@angular/core';
import { CdkDrag, CdkDragMove, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-cross-page',
  templateUrl: './drag-cross-page.component.html',
  styleUrls: ['./drag-cross-page.component.scss']
})
export class DragCrossPageComponent {
  // 页面数据
  pages = [
    { id: 1, name: 'Page 1' },
    { id: 2, name: 'Page 2' },
    { id: 3, name: 'Page 3' }
  ];
  // 拖拽元素数据（记录所属页面）
  draggableItem = { id: 'item01', content: '我的拖拽卡片', belongToPageId: 1 };
  // 所有可连接的dropList引用
  @ViewChildren(CdkDropList) allDropLists!: QueryList<CdkDropList>;
  // 拖拽元素的引用
  @ViewChild('dragElement') dragElement!: CdkDrag;
  // 页面容器引用
  @ViewChild('pagesWrapper') pagesWrapper!: ElementRef<HTMLDivElement>;
  // 当前页面索引
  currentPageIdx = 0;

  ngAfterViewInit() {
    // 初始化时获取所有dropList的连接关系
    this.allDropLists.changes.subscribe(() => {
      this.allDropLists.forEach(list => {
        list.connectedTo = this.allDropLists.toArray();
      });
    });
  }
}

2. 监听拖拽位置，触发页面切换 #

在cdkDragMoved事件里，我们实时获取拖拽元素和当前页面的位置信息，判断是否触达边界，然后触发页面切换逻辑。

onDragMove(event: CdkDragMove, currentPageIdx: number) {
  const pageEl = event.source.element.nativeElement.parentElement; // 当前页面容器
  const dragEl = event.source.element.nativeElement;

  const pageRect = pageEl.getBoundingClientRect();
  const dragRect = dragEl.getBoundingClientRect();

  // 触达页面底部，切换到下一页（不是最后一页）
  if (dragRect.bottom > pageRect.bottom && currentPageIdx < this.pages.length - 1) {
    this.switchToNextPage(pageRect, dragRect, currentPageIdx);
  }
  // 触达页面顶部，切换到上一页（不是第一页）
  else if (dragRect.top < pageRect.top && currentPageIdx > 0) {
    this.switchToPrevPage(pageRect, dragRect, currentPageIdx);
  }
}

// 切换到下一页
private switchToNextPage(pageRect: DOMRect, dragRect: DOMRect, currentIdx: number) {
  // 更新元素所属页面
  this.draggableItem.belongToPageId = this.pages[currentIdx + 1].id;
  // 计算元素在新页面的位置：衔接当前超出的部分
  const overBottom = dragRect.bottom - pageRect.bottom;
  const newTop = overBottom - dragRect.height;

  // 重置拖拽元素位置，实现平滑过渡
  this.dragElement.resetPosition({
    top: newTop,
    left: dragRect.left - pageRect.left
  });

  // 页面容器平滑滚动到目标页面
  this.scrollToTargetPage(currentIdx + 1, pageRect.height);
  this.currentPageIdx = currentIdx + 1;
}

// 切换到上一页
private switchToPrevPage(pageRect: DOMRect, dragRect: DOMRect, currentIdx: number) {
  this.draggableItem.belongToPageId = this.pages[currentIdx - 1].id;
  // 计算元素在新页面的位置
  const overTop = pageRect.top - dragRect.top;
  const newTop = pageRect.height - overTop;

  this.dragElement.resetPosition({
    top: newTop,
    left: dragRect.left - pageRect.left
  });

  this.scrollToTargetPage(currentIdx - 1, pageRect.height);
  this.currentPageIdx = currentIdx - 1;
}

// 页面容器平滑滚动
private scrollToTargetPage(targetIdx: number, pageHeight: number) {
  this.pagesWrapper.nativeElement.scrollTo({
    top: targetIdx * pageHeight,
    behavior: 'smooth'
  });
}

3. 保持选中状态的关键细节 #

• 确保所有cdkDropList都正确连接，这样CDK会自动维护拖拽元素的激活状态，不会因为跨容器而中断
• 我们通过draggableItem.belongToPageId来跟踪元素所属页面，确保切换后元素能在目标页面正确渲染
• 如果是多元素拖拽的场景，只需要把draggableItem改成数组，切换页面时批量更新每个元素的belongToPageId即可

4. 优化平滑度的小技巧 #

• 给页面容器和拖拽元素添加CSS开启硬件加速：

.pages-wrapper, .draggable-card {
  transform: translateZ(0);
  will-change: transform;
}

• 如果只需要垂直方向拖拽，可以给cdkDrag添加cdkDragLockAxis="y"，减少不必要的水平方向计算
• 避免在cdkDragMoved里做大量DOM操作，尽量把计算逻辑轻量化

备注：内容来源于stack exchange，提问作者Elvis Reis