angular-material - 使用 CDK 拖放时 Angular Mat-List-Option 布局发生变化

Question

我正在开发一个 Angular 7 Web 应用程序，并且正在努力解决 Mat-Selection-List 问题，我允许用户拖放 mat-list-option项目。

每个 mat-list-option 项都包含一个 div，它使用 Flex 布局来排列其组件，如下所示:

          <mat-selection-list #taskGroupSelectionList
                              cdkDropList
                              [(ngModel)]="selectedOptions"
                              (ngModelChange)="onNgModelChange($event)"
                              (selectionChange)="onSelectionChange($event)"
                              class="task-group-list"
                              (cdkDropListDropped)="drop($event)">

            <mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>

              <!-- Task Group Item -->
              <div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">

                <!-- Move Handle -->
                <div fxFlex="32px" style="padding: 0 0 0 4px;">
                  <mat-icon class="summary-channel-handle">menu</mat-icon>
                </div>

                <!-- Index -->
                <div fxFlex="24px;">
                  <p style="margin: 0; text-align: right;">
                    {{taskGroup.orderId}}:
                  </p>
                </div>

                <!-- Title -->
                <div fxFlex="nogrow">
                  <p style="margin: 0; padding: 0 0 0 8px; text-overflow: ellipsis; white-space: nowrap;">
                    {{taskGroup.title}}
                  </p>
                </div>

              </div>

            </mat-list-option>

          </mat-selection-list>

这个简单组件的关键 CSS 样式如下:

.task-group-list {
  width: 100%;
  height: 100%;
  display: block;
  background: white;
}

.task-group-box {
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  border-radius: 4px;
  height: 48px;
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
  cursor: move;
  background: white;
}

.task-group-box:first-child {
  border: solid 1px #ddd;
}

.task-group-list.cdk-drop-list-dragging .task-group-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  height: 48px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  box-sizing: border-box;
  border-radius: 4px;
  height: 48px;
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

从功能上来说，我可以拖放列表项，但是在拖动时，我放置在右侧的 mat-list-option 复选框 checkboxPosition="after"移动到左上角并将 mat-list-option 的元素向下推。

有人知道为什么拖动时布局会改变吗？

Answer 1

被拖动的元素可以作为 DOM 中 body 的最后一个子元素找到(仅在拖动时)，这会产生相当多的问题，您可以阅读 here .

如果你的 mat-list-option 元素不是很复杂，只有复选框和一些文本，你可以通过在全局 styles.css 文件中添加一些 CSS 来解决这个问题，例如:

/* Checkbox and text inline and vertically centered */
.cdk-drag-preview .mat-list-item-content {
    display: flex;
    align-items: center;
}

/* Checkbox margin from text */
.cdk-drag-preview .mat-pseudo-checkbox {
  margin-right: 10px;
}

您可以看到DEMO在我创建的这个 stackblitz 中。

如果 mat-list-option 元素的内容有点复杂，您将需要检查该元素并添加必要的样式。您可以通过拖动 mat-list-option 并在拖动时右键单击来完成此操作，检查元素并查找可用于设置其样式的类。