Angular Material中如何拖拽列表项到Div而非目标列表完成跨列表移动

要实现将原列表项拖拽到指定Div后自动移动到第二个列表的效果，核心依赖Angular CDK的拖拽模块，以下是具体实现步骤：

1. 导入必要模块 #

在组件所属的NgModule中导入DragDropModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { TargetComponent } from './target.component';

@NgModule({
  declarations: [TargetComponent],
  imports: [
    CommonModule,
    DragDropModule
  ]
})
export class TargetModule { }

2. 编写组件模板 #

构建原列表、中转Div、目标列表的结构，给中转Div添加cdkDropList使其成为拖拽接收容器：

<!-- 原列表 -->
<div 
  cdkDropList 
  #originList="cdkDropList" 
  [cdkDropListData]="originItems"
  class="list-container"
>
  <div *ngFor="let item of originItems" cdkDrag class="list-item">
    {{ item }}
  </div>
</div>

<!-- 拖拽中转Div -->
<div 
  cdkDropList 
  #dropDiv="cdkDropList"
  (cdkDropListDropped)="handleDrop($event, originList, targetList)"
  class="drop-div"
>
  拖拽到此处移动至目标列表
</div>

<!-- 目标列表 -->
<div 
  cdkDropList 
  #targetList="cdkDropList" 
  [cdkDropListData]="targetItems"
  class="list-container"
>
  <div *ngFor="let item of targetItems" cdkDrag class="list-item">
    {{ item }}
  </div>
</div>

3. 实现拖拽逻辑 #

在组件类中定义数据数组，并处理拖拽完成事件，使用transferArrayItem完成数据转移：

import { Component } from '@angular/core';
import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html',
  styleUrls: ['./target.component.css']
})
export class TargetComponent {
  originItems = ['项目A', '项目B', '项目C', '项目D'];
  targetItems: string[] = [];

  handleDrop(event: CdkDragDrop<string[]>, originList: any, targetList: any): void {
    // 仅处理从原列表拖入中转Div的情况
    if (event.previousContainer === originList) {
      transferArrayItem(
        originList.data,
        targetList.data,
        event.previousIndex,
        targetList.data.length
      );
    }
  }
}

4. 添加样式优化 #

给容器和拖拽元素添加样式，提升交互体验：

.list-container {
  width: 220px;
  min-height: 240px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  margin: 16px;
  display: inline-block;
  vertical-align: top;
}

.drop-div {
  width: 220px;
  height: 120px;
  border: 2px dashed #2196f3;
  border-radius: 4px;
  padding: 12px;
  margin: 16px;
  display: inline-block;
  text-align: center;
  line-height: 96px;
  color: #2196f3;
  cursor: pointer;
}

.drop-div.cdk-drop-list-dragging {
  background-color: rgba(33, 150, 243, 0.1);
  border-style: solid;
}

.list-item {
  padding: 8px 12px;
  margin: 8px 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: move;
}

关键说明 #

• 中转Div通过cdkDropList标记为拖拽接收容器，无需与其他列表建立cdkDropListConnectedTo关联，直接通过事件处理完成数据转移
• transferArrayItem是Angular CDK提供的工具方法，可直接完成数组间的元素转移，无需手动操作数组
• 通过cdk-drop-list-dragging类可给拖拽状态中的中转Div添加视觉反馈，提升用户感知

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