Angular-无法在父组件外拖拽元素
使用CDK拓展库的DragDrop服务并将目标容器传递给createDrag()方法
示例代码：
- 在app.module.ts中导入DragDropModule并在imports数组中声明
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DragDropModule // 添加该模块 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- 在父组件html模板中，为目标容器声明一个#变量
- 在父组件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); } } }
- 在目标容器的样式中添加以下属性
.target { overflow: auto; // 确保滚动条可用 height: 200px; // 示例高度 }
以上步骤将使元素在父组件外拖拽时保留拖拽效果，并在松开鼠标后将元素添加到目标容器中。