Drag/Drop expandable rows - Angular Material

I want to be able to drag and drop any expandable rows into another expandable row. In my demo code when you expand the main row I have 4 expandable rows, I want to be able to drag one of those 4 and drop into another expandable row. For example, one of the four Hydrogen expanded rows I want to drag and drop into one the Helium expanded rows.

This is the section of the code for the expanded rows and the detail in those rows.

html

<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-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']"
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
mat-row
*matRowDef="let row; columns: ['expandedDetail']"
class="example-detail-row"
></tr>


ts

toggleExpandElement(element: PeriodicElement) {
const index = this.expandedElements.indexOf(element);
if (index > -1) {
this.expandedElements.splice(index, 1);
} else {
this.expandedElements.push(element);
}
}

isElementExpanded(element) {
return this.expandedElements.indexOf(element) > -1;
}


Looking at my code in stackblitz I appreciate any assistance anyone can provide. Demo - Stackblitz

Continue reading...