使用拖动事件在Angular Material mat-table中重新排序行

Question

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

- Vikrant Yadav

---

你找到任何解决方案了吗？谢谢。 - lmarcelocc

我对设计进行了更改，放弃了数据表格，并使用简单的列表进行了样式设置，我们使用了（ng2-dragula）[https://valor-software.com/ng2-dragula/] 包来帮助重新排序。 - Vikrant Yadav

谢谢。我仍在使用mat-table，并且也在使用ng2-dragula。谢谢。 - lmarcelocc

你有ng2-dragula与Material表格一起使用的示例吗？ - Esso

Answer 1

对于那些想知道如何在Angular Material表格(mat-table)中使用dragula的人:

你需要使用<mat-table ..>选择器，而不是使用<table mat-table ...>。前者将在表元素(应用了dragula的位置)和行之间有一个tbody元素。尝试拖动行将使dragula捡起元素。然而，对于<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);
}

- Jan Wendland