angular13：拖放不适用于网格答案

【问题标题】：angular13: drag and drop not working on gridangular13：拖放不适用于网格
【发布时间】：2022-12-24 22:51:27
【问题描述】：

我有一个纸牌游戏的网页，我实现了 fxLayout.xs 并且在网格中可以看到纸牌列表，但是拖放操作无法正常工作。

html手部组件

<div class="mano">
  <div
    fxLayout="row wrap"
    fxLayoutAlign="center"
    fxLayoutGap="10px"
    cdkDropList
    id="listaMano"
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="drop($event)"
    [cdkDropListData]="cartasEnMano"
    cdkDropListConnectedTo="listaCampo"
  >
    <div
      fxFlex="12"
      fxLayoutGap="10px"
      fxFlex.xs="30"
      cdkDrag
      *ngFor="let carta of cartasEnMano"
      (click)="JugarCarta(carta, cartasEnMano)"
      class="objetoCarta"
    >
      <app-carta-en-mano [carta]="carta"></app-carta-en-mano>
    </div>
  </div>

TS手部组件

drop(event: CdkDragDrop<Carta[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

html游戏组件

<app-oponente></app-oponente>

<div
  fxLayout="row wrap"
  fxLayoutAlign="center"
  cdkDropList
  id="listaCampo"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListData]="cartamia"
  [cdkDropListConnectedTo]="['listaCampo']"
  class="lista"
>
  <div fxFlex="20" fxFlex.xs="30" *ngFor="let carta of cartasEnCampo" cdkDrag>
    <app-cartas-en-juego [carta]="carta"></app-cartas-en-juego>
  </div>

  <div class="contenedorBoton">
    <button
      mat-button
      (click)="combate()"
      class="boton"
      *ngIf="cartasEnCampo.length === 2"
    >
      Comenzar Combate
    </button>
    <p-toast position="top-center"> </p-toast>
  </div>
</div>

<app-mano></app-mano>

TS游戏组件

drop(event: CdkDragDrop<Carta[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else if (this.CartasService.cartaMia === undefined) {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );}}

我使用这个解决方案来指导我https://stackblitz.com/edit/angular-ivy-xtyzts，但我发现了两个问题。

1 - 当您移动卡片时，有时它会停止允许移动它们。

2 - 基于链接中的示例，我不知道如何将卡片发送到另一个 cdkDropList（游戏组件），因为 transferArrayItem 函数没有发送正确的数据

【问题讨论】：

标签： angular drag-and-drop grid draggable

【解决方案1】：

Here 是多个列表的示例（官方文档）。

HTML

<div class="example-container">
  <h2>To do</h2>

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

代码

import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: 'cdk-drag-drop-connected-sorting-example',
  templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
  styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample {
  todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];

  done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex,
      );
    }
  }
}

附加：cdkDrag 对网格不是很好。您可以使用我的库在拖动中进行排序。 Ngx-explorer-dnd 的灵感来自 cdkDrag 并且仍在开发中并提供 alpha 版（此时）

Stackblitz 示例也可用。

【讨论】：