如何通过拖放重新排序4个div(使用angular2/4)？

npm install @angular/cdk @angular/material

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

@NgModule({
  imports: [
    // other imports
    DragDropModule
  ],
  // other configurations
})

<div cdkDropList (cdkDropListDropped)="onDrop($event)">
  <div cdkDrag [cdkDragData]="'div1'">Div 1</div>
  <div cdkDrag [cdkDragData]="'div2'">Div 2</div>
  <div cdkDrag [cdkDragData]="'div3'">Div 3</div>
  <div cdkDrag [cdkDragData]="'div4'">Div 4</div>
</div>

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

// ...

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

divs: string[] = ['div1', 'div2', 'div3', 'div4'];