Как реализовать функцию перетаскивания в таблице материалов Angular?

<mat-table [dataSource]="dataSource"
               matSort matSortActive="categoryName" matSortDirection="asc" matSortDisableClear
               [dragula]='"seventh-bag"'>

        <ng-container matColumnDef="seqNo">

            <mat-header-cell *matHeaderCellDef>S.No.</mat-header-cell>

            <mat-cell *matCellDef="let row;let i=index;">
              {{(paginator.pageSize * (paginator.pageIndex)) + i+1}}
            </mat-cell>

        </ng-container>

        <ng-container matColumnDef="name">

            <mat-header-cell *matHeaderCellDef mat-sort-header (mouseenter)="nameIcon=false" (mouseleave)="nameIcon=true">
              Category Name
              <i *ngIf="nameIcon && sort.active=='join'" class="fa fa-sort"></i>
            </mat-header-cell>

            <mat-cell
                      *matCellDef="let catg;">
                     name
            </mat-cell>

        </ng-container>


        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

        <mat-row *matRowDef="let row; columns: displayedColumns"
        (click)="selectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row._id}"
        (mouseenter) ="dragRow = row"  (mouseleave) ="mouseLeave('div A')"
        >
          {{row}}
        </mat-row>

    </mat-table>

Когда я использую описанный выше подход, я не могу получить данные перетаскиваемой строки и ее новую позицию.

2.) Когда я реализую ng2-dragula

 <mat-row *matRowDef="let row; columns: displayedColumns"
        (click)="selectedRow(row)"  [dragula]='"seventh-bag"'
        >

тогда функция перетаскивания не работает должным образом

Пожалуйста, обратитесь к картинке ниже