我能够使用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
答案 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,则可能必须找到其他解决方法。
希望能给您一些帮助!