如何在 Flex 布局中使用 Angular Material Drag n Drop？

问题描述

我正在尝试制作一个具有拖放功能并具有响应能力的网格。首先，我尝试使用 grid list，但找不到如何使其响应不同的屏幕尺寸。

我放弃了网格列表，并决定使用 angular flex layout 库来创建我自己的网格，该网格本身具有响应性。然后我尝试将其与 Angular Material Drag n Drop 结合使用，但它无法正常工作。

具体来说，我可以在网格元素周围拖动，但行为充其量是不稳定的。有时我可以重新排序元素，有时不能。有时我向左移动一个元素，它向右移动，有时相反。你得到了图片。这是不可预测的。另一个问题是，如果您四处拖动元素，网格中的其他元素会随机出现和消失。

我尝试阅读拖放文档，但我开始觉得它不应该按照我想要的方式工作。有没有人知道可能对我有用的实现？

这是我的代码：

my-component.html

<div fxFlex fxLayout="column" fxLayoutGap="1%">
  <div fxLayout="row wrap" fxLayoutGap="16px grid"
       cdkDropList
       [cdkDropListData]="numbers"
       (cdkDropListDropped)="drop($event)">

    <div *ngFor="let n of numbers"
         fxFlex="25%"
         fxFlex.md="33%"
         fxFlex.sm="50%"
         fxFlex.xs="100%"
         cdkDrag>
      <div fxLayout="row" style="width: 200px; height: 200px; background-color: red;">
        Number: {{n}}
      </div>
    </div>

</div>

my-component.ts

import { Component,OnInit,ViewChild } from '@angular/core';
import { CdkDragDrop,CdkDropList,CdkDropListGroup,moveItemInArray } from "@angular/cdk/drag-drop";

@Component({
  selector: 'app-menu',templateUrl: './my-component.html',styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit {
  @ViewChild(CdkDropListGroup) listGroup!: CdkDropListGroup<CdkDropList>;
  @ViewChild(CdkDropList) placeholder!: CdkDropList;

  numbers = [1,2,3,4,5,6,7,8];

  constructor() {
  }

  ngOnInit(): void {
  }

  drop(event: CdkDragDrop<number[]>) {
    console.log("drop() prev index: " + event.prevIoUsIndex + ",cur index: " + event.currentIndex);
    moveItemInArray(event.container.data,event.prevIoUsIndex,event.currentIndex);
  }
}

解决方法

我非常努力地将 @angular/flex-layout 和 @angular/cdk/drag-drop 结合起来，但问题太多了。所以我用 css flex 做到了 它是响应式的。

angular-drag-drop-flex-wrap

import { Component } from "@angular/core";
import { CdkDragDrop } from "@angular/cdk/drag-drop";

@Component({
  selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]
})
export class AppComponent {
  items = [0,1,2,3,4,5,6,7,8,9,10,11];
  drop(event: CdkDragDrop<any>) {
    this.items[event.previousContainer.data.index] = event.container.data.item;
    this.items[event.container.data.index] = event.previousContainer.data.item;
  }
}

.categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* NEW */
  width: 100%;
}

.inner {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
  text-align: center;
  line-height: 5rem;
  background-color: #efefef;
  cursor: move;
}

.categories-item {
  flex: 1 0 5rem; /* NEW */
  margin: 5px; /* NEW */
  background-color: transparent;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
  position: relative;
}
.placeholder {
  flex: 1 0 5rem; /* NEW */
  margin: 5px; /* NEW */
  background-color: white;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
  border: 1px;
}
.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0,0.2,1);
}

<div #contenedor class="categories" cdkDropListGroup>
    <ng-container *ngFor="let item of items;let i=index">
        <div class="categories-item" cdkDropList  cdkDropListOrientation="horizontal"
            [cdkDropListData]="{item:item,index:i}" (cdkDropListDropped)="drop($event)">
            <div class="inner" cdkDrag>
                <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                {{item}}
            </div>
        </div>
    </ng-container>
</div>
{{items|json}}