Question

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

Answer 1

这可能不是您关于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，则可能必须找到其他解决方法。

希望能给您一些帮助！

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

1 个答案: