使用Angular CDK中的DragDropModule解决问题

要解决这个问题，首先需要在Angular中引入CDK（Angular的组件开发工具包）。然后，我们需要将我们想要作为容器的元素标记为CDK DropList，并将元素的子元素标记为CDK Drag。将CDK Drag放置在CDK DropList中将允许我们通过拖动和放置操作重新排列元素。

代码示例：

在app.module.ts文件中导入DragDropModule：

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

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

在模板组件中设置CDK DropList和CDK Drag：

  
{{ item }}

在组件类中添加onDrop方法，以更新我们需要的UI：

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  // ...
})
export class MyComponent {

  public items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  public onDrop(event: CdkDragDrop): void {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }

}

现在，拖放操作应该可以排列元素，而不会被Angular路由器割断。