Angular Material表格可展开行拖拽排序功能实现求助

大家好，我目前在开发Angular Material可展开表格时，遇到了拖拽排序的问题，想请各位帮忙排查一下问题所在。

我的需求是：让表格中可展开的行能够互相拖拽，调整它们的排序位置。我已经尝试在展开行的HTML元素上添加了Angular CDK DragDrop的相关属性（cdkDrag、cdkDragLockAxis="y"、[cdkDragData]="row"），现在虽然能拖动展开行，但松开鼠标后，行并不会像普通拖拽排序那样自动调整上下位置，就只是停在拖动后的位置，完全没有触发数据层面的排序更新——相当于拖拽只是“视觉上的移动”，实际数据和行的顺序都没变化。

我实在搞不清楚代码里漏掉了什么关键配置，希望有经验的朋友能帮我梳理一下，要是有其他替代的实现方案也非常欢迎。

下面是我写的和展开行相关的HTML代码：

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length" >
    <div class="example-element-detail" [@detailExpand]="isElementExpanded(element) ? 'expanded' : 'collapsed'" >
      <div></div>
      <!-- <div class="example-element-diagram">
        <div class="example-element-position">{{element.position}}</div>
        <div class="example-element-symbol">{{element.symbol}}</div>
        <div class="example-element-name">{{element.name}}</div>
        <div class="example-element-weight">{{element.weight}}</div>
      </div>
      <div class="example-element-description">
        {{element.description}}
        <span class="example-element-description-attribution"> -- Wikipedia </span>
      </div> -->
      <div class="example-element-name expanded-column-spacing">
        {{element.Name}}
      </div>
      <div class="example-element-weight expanded-column-spacing">
        {{element.weight}}
      </div>
      <div class="example-element-weight expanded-column-spacing">
        {{element.weight}}
      </div>
    </div>
  </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row" [class.example-expanded-row]="isElementExpanded(element)" ></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" (click)="toggle(row)" cdkDrag cdkDragLockAxis="y" [cdkDragData]="row" ></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row" ></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row" ></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row" ></tr>
</tr>
<tr mat-row *matRowDef="let row; columns: getDisplayedColumns()"></tr>
</table>

相关的TypeScript和CSS代码我也整理在了示例项目中，核心逻辑都围绕上面的HTML展开。

非常感谢大家的帮助！

内容来源于stack exchange