Drag and Drop expandable rows in 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-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']"
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;
}


Demo - Stackblitz

Continue reading...