angular实现拖放

Angular提供了一个名为`@angular/cdk/drag-drop`的模块，用于实现拖放功能。下面是一个简单的示例：

1. 首先，需要在模块中导入`DragDropModule`：

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

@NgModule({
  imports: [
    DragDropModule
  ]
})
export class AppModule { }

2. 在组件模板中，使用`cdkDrag`和`cdkDropList`指令来实现拖放：

<div cdkDropList (cdkDropListDropped)="onDrop($event)">
  <div *ngFor="let item of items" cdkDrag>{{item}}</div>
</div>

这个示例中，我们创建了一个拖放列表，其中每个项目都带有`cdkDrag`指令。当用户将项目拖到另一个项目上时，`cdkDropListDropped`事件将被触发。

3. 在组件类中，实现`onDrop()`方法来处理拖放事件：

export class AppComponent {
  items = ['Item 1', 'Item 2', 'Item 3'];

  onDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}

在这个示例中，我们使用`moveItemInArray()`函数来移动项目的位置。

以上就是一个简单的Angular实现拖放的示例。更多高级用法，可以参考官方文档。