使用拖動事件在Angular材質墊表中對行進行重新排序

Question

我正在開發一個使用Angular Material的 Data Table組件的網站。 我希望用戶能夠通過上下拖動行來為每行設置某種優先級。 類似於jQuery的數據表 。 我在其文檔中找不到使用拖動事件重新排序的支持。 如何在向項目添加最少依賴性的同時實現此功能？

Answer 1

對於那些尋找如何與Angular Material表（mat-table）一起使用的答案的人：

代替使用<table mat-table ...>您必須使用<mat-table ..>選擇器。 前者將在table元素（應用了dragula bag的位置）和行之間具有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);
}