Question

我使用Angular CDK中的拖放模块遇到了一个问题。我在具有以下CSS属性的容器div中使用它：

display: flex;
flex-wrap: wrap;

此处是flex_wrap属性，因此，如果所包含的可拖动元素不适合容器，它们将换行到第二行，依此类推。

由于拖动是水平（cdkDropListOrientation="horizontal"），因此当所有元素都放在一行中时，此方法就很好用，但是当它们缠绕到第二行时，拖放就变成了越野车。我进行了以下堆栈重现以重现错误：https://stackblitz.com/edit/angular-fytgp6。

如果任何人都知道如何解决此问题或考虑解决此问题的方法，将大有帮助！

Answer 1

我已经使用Angular的工具包（cdkDropListGroup，moveItemInArray和transferArrayItem）实现了一个简单的解决方案：https://stackblitz.com/edit/angular-drag-n-drop-mixed-orientation-example

我要做的就是创建一个项目表矩阵，用作模板的视图模型，并且组件在项目列表（输入模型）与表（视图模型）之间同步。我在这里发布了详细的解释：https://taitruong.github.io/software-developer.org/post/2019/10/26/Angular-drag'n'drop-mixed-ientation-in-flex-row-wrap /

模板：

<div #tableElement cdkDropListGroup>
  <!-- Based on the width of template reference #tableElement' and item box width,
       columns per row can be calculated and a items table matrix is initialized-->
  <div
    fxLayout="row"
    *ngFor="let itemsRow of getItemsTable(tableElement)"
    cdkDropList
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="itemsRow"
    (cdkDropListDropped)="reorderDroppedItem($event)"
  >
    <!-- Component.reorderDroppedItem():
         reorders table/view model, update input model, and resize table matrix-->
    <div *ngFor="let item of itemsRow" cdkDrag>
      <div class="drag-placeholder" *cdkDragPlaceholder></div>
      <div fxLayoutAlign="center center" class="item-box">{{ item }}</div>
    </div>
  </div>
</div>

CSS：

.item-box {
  width: 150px;
  height: 150px;
  border: solid 3px #ccc;
  background: #fff;
  font-size: 30pt;
  font-weight: bold;
  border-radius: 5px;
  margin: 0px 0px 5px 5px;
}

 .drag-placeholder {
   background: #ccc;
   border: dotted 3px #999;
   height: 150px;
   width: 50px;
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

组件：

export class AppComponent {
  // one dimensional input model
  items: Array<number> = Array.from({ length: 21 }, (v, k) => k + 1);
  // two dimensional table matrix representing view model
  itemsTable: Array<number[]>;

  // fix column width as defined in CSS (150px + 5px margin)
  boxWidth = 155;
  // calculated based on dynamic row width
  columnSize: number;

  getItemsTable(tableElement: Element): number[][] {
    // calculate column size per row
    const { width } = tableElement.getBoundingClientRect();
    const columnSize = Math.round(width / this.boxWidth);
    // view has been resized? => update table with new column size
    if (columnSize != this.columnSize) {
      this.columnSize = columnSize;
      this.initTable();
    }
    return this.itemsTable;
  }

  initTable() {
    // create table rows based on input list
    // example: [1,2,3,4,5,6] => [ [1,2,3], [4,5,6] ]
    this.itemsTable = this.items
      .filter((_, outerIndex) => outerIndex % this.columnSize == 0) // create outter list of rows
      .map((
        _,
        rowIndex // fill each row from...
      ) =>
        this.items.slice(
          rowIndex * this.columnSize, // ... row start and
          rowIndex * this.columnSize + this.columnSize // ...row end
        )
      );
  }

  reorderDroppedItem(event: CdkDragDrop<number[]>) {
    // same row/container? => move item in same row
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      // different rows? => transfer item from one to another list
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }

    // update items after drop: flatten matrix into list
    // example: [ [1,2,3], [4,5,6] ] => [1,2,3,4,5,6]
    this.items = this.itemsTable.reduce(
      (previous, current) => previous.concat(current),
      []
    );

    // re-initialize table - makes sure each row has same numbers of entries
    // example: [ [1,2], [3,4,5,6] ] => [ [1,2,3], [4,5,6] ]
    this.initTable();
  }
}

Answer 2

这是CDK拖放的已知问题：https://github.com/angular/material2/issues/13372

基本上，您需要具有一个定义为“ cdkDropListGroup”的父div，然后除了将其上具有“ cdkDrag”属性之外，还需要将每个可拖动项目都视为“ cdkDropList”。这样就可以确保每个项目都是自己的容器，并且“ cdkDropListGroup”指令将它们全部连接在一起。

然后，您可以在cdkDropList容器上使用一个* ngFor来为每个数组项生成一个。在cdkDropList中放入[cdkDropListData] =“ index”，以便可以将当前拖动的索引传输到cdkDrag。使用子cdkDrag元素，可以使用[cdkDragData] =“ index”获得此索引。然后，在cdkDrag子项上具有事件绑定（cdkDragEntered）=“ entered（$ event）”，此绑定将在您每次尝试将元素拖动到新容器之一时触发。在输入的函数内部，使用CDK中的moveItemInArray方法来转移项目。

entered(event: CdkDragEnter) {
  moveItemInArray(this.items, event.item.data, event.container.data);
}

<div style="display:flex;flex-wrap:wrap" cdkDropListGroup>
  <div cdkDropList [cdkDropListData]="i" *ngFor="let item of items; let i = index;"  [style.width]="item.width || '100%'">
    <div cdkDrag [cdkDragData]="i" (cdkDragEntered)="entered($event)">
      {{item}}
    </div>
  </div>
</div>

如果这不适用于您，则可以尝试使用mat-grid来控制布局。

CSS Flexbox中的角度CDK拖放问题

2 个答案: