2

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

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

请参考下图

当 ng2-dragula 实现 mat-rows 然后这些事情发生了

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

4

1 回答 1

0

这可能不是您关于 Dragula 的问题的确切答案，但看到没有人尝试过，但这里有一个似乎对我有用的可能解决方案：我也尝试使用 mat-table 进行拖放。我没有使用 ng2-dragula（我过去使用过 jquery ui-sortable），但我确实使用了 angulars 新的 CDK 拖放系统。（现在在 7.0.0 中）。

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

我遇到的唯一问题是，如果您想要进行排序，cdkDropList 指令必须是 cdkDrag 元素的直接父级，不确定是否有解决方法，我找不到其他选项.

看到 mat-tables 的构造方式似乎与 d&d 不兼容当嵌套并与 cdk 的拖放工具配合使用时。（你可能需要做一些自定义样式让它看起来像一张桌子）

我意识到它不会附带 mat-table 附带的排序、过滤功能，但如果您优先考虑 d&d，您可能必须找到另一种解决方法。

希望这能给你一些工作！

于 2018-11-09T13:17:26.183 回答