Implementing drag a row from Angular Material table inside a node in angular material tree

I have a material table in following structure:

<table mat-table #mailBox [dataSource]="inboxTableDataSource" class="mat-elevation-z8 demo-table">    

  <ng-container matColumnDef="letterNumber">
    <th mat-header-cell *matHeaderCellDef> letter Number </th>
    <td mat-cell *matCellDef="let element"> {{element.letterNumber}} </td>
  </ng-container>      

  <ng-container matColumnDef="subject">
    <th mat-header-cell *matHeaderCellDef> subject</th>
    <td mat-cell *matCellDef="let element"> {{element.subject}} </td>
  </ng-container>
 
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row class="smf-gridrow" *matRowDef="let row; columns: displayedColumns;" [class.make-bold]='!row.isRead'
    style="cursor:pointer ;" [cdkContextMenuTriggerFor]="gridContextMenu"></tr>
</table>

<mat-paginator [length]="resultsLength" [pageSize]="15" [pageSizeOptions]="[10, 15, 25, 100]"
  [showFirstLastButtons]="true"></mat-paginator>

and beside that I have a material tree as following:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">      
  <input type="checkbox" id="btnControl" />
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (contextmenu)="onContextmenu(node,$event)" (click)="onNodeClick(node,$event)" class="treeNode"  [cdkContextMenuTriggerFor]="inboxFolderContextMenu">
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (contextmenu)="onContextmenu(node,$event)" (ngclick)="onNodeClick(node,$event)"
    class="treeNode"  [cdkContextMenuTriggerFor]="inboxFolderContextMenu">
    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>

I fill both table and tree from a sql server database.

now I'm trying to be able to drag a row from material table inside a node of material tree. is there a way to achiev开发者_如何转开发e this goal?