使用拖动事件在Angular材质mat-table中对行进行重新排序

Question

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

Answer 1

对于那些寻找如何将其与 Angular Material 表 (mat-table) 一起使用的答案的人：

<table mat-table ...>您将不得不使用选择器，而不是使用<mat-table ..>。前者将tbody在表格元素（您应用拖拉古拉袋的位置）和行之间有一个元素。尝试拖动行将使拖古拉拾取该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);
}