如何在角材质表中实现拖放功能?

我能够使用ng2 dragula实现拖放功能,但我面临的问题是,它也会拖拽标题行,并且无法从拖拽的行中获取拖拽的行值(其行数据)以及上面和下面的行。

有人能帮我吗?

我在github上也发现了同样的问题

https://github.com/valor-software/ng2-dragula/issues/831

<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"'
        >

那么拖放功能就不能正常工作了

请参考下面的图片

图片来源:- https://user-images.githubusercontent.com/6483007/36256531-4a34b638-124b-11e8-9b13-cd15391886ae.gif