具有表格主体/行扭曲宽度的角度 CDK 拖放列表（无材料）答案

【问题标题】：Angular CDK Drag/Drop List with table-body / rows distorting width (without Material)具有表格主体/行扭曲宽度的角度 CDK 拖放列表（无材料）
【发布时间】：2020-04-05 12:40:52
【问题描述】：

我正在使用一个普通的 (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>

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

【问题讨论】：

标签： angular angular-cdk

【解决方案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>

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

【讨论】：

【解决方案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>

【讨论】：