拖拽功能在Angular官方组件库material中有，即为DragDropModule。
一般功能在文档中都有提及，也比较好理解，不赘述。但在多行多列布局中的拖拽排序，用普通的排序会有问题（预览位置错乱，无法落位正确），官方没有给出明确的方案。

layout

解决方法

将list-item的结构整体提升，采用group-list-item结构。
整个功能布局视为group，一个拖动项为单list-单item，这样拖动排序时，会视作item拖到另一个拖动项的list中，完成后会进行排序。
拖拽预览时，会出现一个list中有两个item的情况，需要写点样式代码隐藏一个item。

代码
以这部分代码作为基础模板

base sort

修改代码如下
html

<div cdkDropListGroup class="example-list">
  <div
    class="example-box"
    *ngFor="let movie of movies; let i = index"
    cdkDropList
    (mousedown)="getIndex(i)"
    [cdkDropListData]="movies"
    (cdkDropListDropped)="drop($event, i)"
  >
    <div cdkDrag>
      {{ movie }}
    </div>
  </div>
</div>

ts

getIndex(index: number) {
  this.curIndex = index;
}

drop(event: CdkDragDrop<string[]>, i: number) {
  if (event.previousContainer !== event.container) {
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      this.curIndex,
      i
    );
  }
}

less

&.cdk-drop-list-dragging {
  .cdk-drag:not(.cdk-drag-placeholder) {
    display: none !important;
  }
}