带有表格主体/行扭曲宽度的 Angular CDK 拖/放列表(无 Material )

Question

我正在使用一个普通(Bootstrap)表，我想在其中包含可排序的行。我正在使用 Angular CDK (DragDropModule) 来实现排序/排序。但是，当拖动行时，它会扭曲宽度，因为 cdkDragPreview(tr 元素)现在位于表格外部，附加到正文，因此它具有不同的 display 样式，并且列宽度不会与原始表格不匹配，即使它是 display:table。

这是粗略的 html:

  <table>
    <thead>
      <tr>
        <th><i class="fas fa-sort mt-1"></i></th>
        <th>Code</th>
        <th>Name</th>
        <th>Date Type</th>
      </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="drop($event)">
      <tr *ngFor="let date of dates" cdkDrag>
        <td cdkDragHandle><i class="fas fa-sort mt-1"></i></td>
        <td>{{ date.code }}</td>
        <td>{{ date.name }}</td>
        <td>{{ date.dateType }}</td>
      </tr>
    </tbody>
  </table>

如何让拖动/排序“看起来不错”？

Answer 1

我最终没有使用拖动预览(cdkDragPreview)，因为这太难获得正确的列宽。相反，我只是将 cdkDragPreview 设置为空元素，这样就不会显示任何内容，并让用户看到实际(底层)排序，而不是预览。

所以，简单地说:

  <table>
    <thead>
      <tr>
        <th><i class="fas fa-sort mt-1"></i></th>
        <th>Code</th>
        <th>Name</th>
        <th>Date Type</th>
      </tr>
    </thead>
    <tbody cdkDropList (cdkDropListDropped)="drop($event)">
      <tr *ngFor="let date of dates" cdkDrag>
        <td cdkDragHandle><i class="fas fa-sort mt-1"></i><span *cdkDragPreview></span></td>
        <td>{{ date.code }}</td>
        <td>{{ date.name }}</td>
        <td>{{ date.dateType }}</td>
      </tr>
    </tbody>
  </table>

如果有人能找到一种好的、简单的方法来获得正确的列宽，那将是理想的......