Angular CDK提供了丰富的拖拽和复制行为的功能。下面是一个解决拖拽和复制行为问题的示例代码:
npm install @angular/cdk
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
DragDropModule
]
})
export class YourModule { }
cdkDrag
和cdkDropList
指令来实现拖拽和复制行为:
{{ item }}
items
数组和onDrop
方法来处理拖拽和复制行为:import { CdkDragDrop, moveItemInArray, copyArrayItem } from '@angular/cdk/drag-drop';
export class YourComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
onDrop(event: CdkDragDrop) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
}
请根据你的实际需求进行适当的修改和调整。这里的示例代码演示了如何使用Angular CDK实现拖拽和复制行为。你可以根据自己的需求进行进一步的扩展和定制。