Drag/drop an expanded row into another set of expanded rows - Angular Material

I want to have the ability to drag and drop one of the rows that expand in the table to another set of rows that expand in the table. I have added drag and drop properties in the html for the expanded rows (expandedDetail) by using cdkDrag but that isn't working. I can drag an expanded row but it just kind of sticks once I drop it instead of moving a row down or up like a normal drag and drop if that makes sense. I am asking for assistance from anyone that is able to help me accomplish this. I am not sure what I'm missing from my code to be able to accomplish this.

Html for the expanded rows

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>


The code above is in part of the stackblitz link below along with other files like the typescript and css files. I appreciate any assistance or guidance anyone has to get this to work. If there are other alternatives to use besides drag and drop that would be helpful also.

Stackblitz

Continue reading...