Angular CDK Drag / Drop List с шириной искажения тела таблицы / строк (без материала)

Я использую простую таблицу (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
person Sean    schedule 24.11.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я закончил тем, что НЕ использовал предварительный просмотр перетаскивания (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>

Если кто-то может найти хороший и простой способ получить правильную ширину столбцов, это было бы идеально ...

person Sean    schedule 24.11.2019

arrow_upward
0
arrow_downward

В итоге я установил ширину столбца вручную.

См. Рабочий пример: https://angular-cdk-drag-drop-bootstrap-table.stackblitz.io

Результат

Угловое перетаскивание CDK / Выпадающий список внутри таблицы (не таблица материалов) - обработка строк с искажением ширины 

.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>
person trungk18    schedule 05.04.2020