javascript - 使用拖动事件在 Angular Material 垫表中进行行重新排序

Question

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

Answer 1

对于那些寻找如何将其与 Angular Material tables (mat-table) 结合使用的答案的人:

而不是使用 <table mat-table ...>你将不得不使用 <mat-table ..>选择器。前者将有一个 tbody表格元素(您应用 dragula 包的地方)和行之间的元素。尝试拖动行将使 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);
}