使用CDK拓展库的DragDrop服务并将目标容器传递给createDrag()方法

示例代码：

1. 在app.module.ts中导入DragDropModule并在imports数组中声明

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DragDropModule // 添加该模块 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

2. 在父组件html模板中，为目标容器声明一个#变量

3. 在父组件ts文件中导入DragDropService并绑定目标容器变量到onDrop()方法中

import { DragDropService } from '@angular/cdk/drag-drop';

...

export class ParentComponent { constructor(private dragDropService: DragDropService){}

onDrop(event: CdkDragDrop<[]>) { if(event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); } else { this.dragDropService.createDrag(event.previousContainer.element.nativeElement, event.item.element.nativeElement, targetContainer); // 将targetContainer传递给createDrag()方法 transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); } } }

4. 在目标容器的样式中添加以下属性

.target { overflow: auto; // 确保滚动条可用 height: 200px; // 示例高度 }

以上步骤将使元素在父组件外拖拽时保留拖拽效果，并在松开鼠标后将元素添加到目标容器中。