使用拖动事件在 Angular 材质垫表中重新排序行

【问题标题】：Row reordering in Angular material mat-table using drag events使用拖动事件在 Angular 材质垫表中重新排序行
【发布时间】：2023-03-23 16:00:01
【问题描述】：

我正在开发一个网站，我正在使用Angular Material 的Data Table 组件。我希望用户能够通过上下拖动行来为每一行设置某种优先级。类似于Data Table for jQuery 的东西。我在他们的文档中找不到使用拖动事件重新排序的支持。如何在为我的项目添加最少依赖项的同时实现此功能？

【问题讨论】：

您找到解决方案了吗？谢谢。
我对设计进行了更改，放弃了数据表，并设计了一个简单的列表，我们在上面使用了 (ng2-dragula)[valor-software.com/ng2-dragula/] 包以帮助重新排序
谢谢。我仍在使用 mat-table 并且也在使用 ng2-dragula。谢谢。
你有一个例子说明你是如何让 ng2-dragula 处理材料表的吗？

标签： javascript angular angular-material2

【解决方案1】：

对于那些正在寻找有关如何将其与 Angular Material 表（mat-table）一起使用的答案的人：

您必须使用<mat-table ..> 选择器，而不是使用<table mat-table ...>。前者将在表格元素（您应用 Dragula 袋的位置）和行之间有一个 tbody 元素。尝试拖动行将使dragula 拾取tbody 元素。但是，对于<mat table ...>，行将是容器的直接子元素。

然后你可以像这样使用dragula：

<!-- my-table.component.html -->
<mat-table 
    [dragula]='"my-bag"' 
    [dataSource]="myTableDataSource">
    <!-- your column and row defs go here -->
</mat-table>

在你的组件中

// my-table.component.ts
constructor(private dragulaService: DragulaService) {
  dragulaService.drop.subscribe((value) => {
    this.onDrop(value);
  });
}

private onDrop(args) {
    console.log(args);
}

【讨论】：