如何在Angular Material Table中实现拖放功能?

时间:2018-06-22 11:14:08

标签: drag-and-drop angular5 angular-material2 ng2-dragula angular-cdk

我能够使用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"'
        >

然后拖放功能无法正常工作

请参考下图

When ng2-dragula implement mat-rows then these things happened

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

1 个答案:

答案 0 :(得分:0)

这可能不是您关于Dragula的问题的确切答案,但是看到没人可以使用,这似乎是一种可行的解决方案,似乎对我有用:我试图通过拖放操作来使用mat-table好。我没有使用ng2-dragula(我过去使用的是jQuery ui-sortable),但是我确实使用了新的CDK拖放系统。 (现在在7.0.0中)。

https://material.angular.io/cdk/drag-drop/overview

我唯一遇到的问题是,如果您想进行排序,则cdkDropList指令必须是cdkDrag元素的直接父级,不确定是否可以解决此问题,而我找不到选项否则。

看到mat-tables似乎不能很好地与d&d配合使用,我看起来像是列表或扩展面板(如果要在每行上扩展表格的下拉列表)嵌套时表现得更好,并且可以与cdk的拖放工具一起很好地工作。 (您可能需要做一些自定义样式才能使其看起来像一张桌子)

我意识到它不会带有mat-table附带的排序,过滤功能,但是如果您要优先考虑d&d,则可能必须找到其他解决方法。

希望能给您一些帮助!