带有表主体/行变形宽度的角度CDK拖放列表（无材质）

Question

我正在使用一个普通的（引导程序）表，该表上要有可排序的行。我正在使用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>

如果任何人都能找到一种合适的简便方法来正确设置列宽，那将是理想的选择...

Answer 2

我最终手动设置了列宽。

请参见工作示例：https://angular-cdk-drag-drop-bootstrap-table.stackblitz.io

结果

.col-xs {
  width: 2%;  
}

.col-sm {
  width: 10%;  
}

.col-md {
  width: 20%;  
}

<tbody cdkDropList
        (cdkDropListDropped)="onDrop($event)">
    <tr *ngFor="let user of users"
        cdkDrag
        cdkDragLockAxis="y">
        <th class="col-xs">
            <div class="drag-handle">
                <ng-container [ngTemplateOutlet]="dragHandleTmpl">
                </ng-container>
                {{ user.order }}
            </div>
        </th>
        <td class="col-md">{{ user.first }}</td>
        <td class="col-md">{{ user.last }}</td>
        <td class="col-md">{{ user.email }}</td>
        <td class="col-md">{{ user.address }}</td>
    </tr>
</tbody>