web-dev-qa-db-ja.com

2つのコンポーネント間でAngular7（角形マテリアル）ドラッグドロップを使用する方法

最近angularにドラッグアンドドロップを導入angular material https://material.angular.io/cdk/drag-drop/overview 。

すべての例では、単一のコンポーネントで説明しています。 2つの異なるコンポーネントでこれを使用する方法、1つのコンポーネントアイテムをドラッグし、別のコンポーネントにドロップします。

angulardrag-and-dropangular-materialangular7angular-cdk
13
Jomy Joseph

プロパティidおよびcdkDropListConnectedToを使用して、両方のリストをリンクできます。

コンポーネント1：

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

コンポーネント2：

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

複数のリストを1つのリストに接続する必要がある場合は、次の構文を使用できます。[cdkDropListConnectedTo]="['list-1', 'list-2', 'list-3', 'list-4']"

リストをリンクした後、アクションに応じて一方または両方のリストを正しく更新する必要があります。次のようにドロップ関数でそれを行うことができます：

drop(event: CdkDragDrop<string[]>) {
    if (event.container.id === event.previousContainer.id) {
      // move inside same list
      moveItemInArray(this.list, event.previousIndex, event.currentIndex);
    } else {
      // move between lists
    }
}

リスト間でアイテムを移動する場合、リストを一元的に追跡することができます。これを行うには、サービス、ストア、またはその他の方法を使用します。

23
GCSDC

上記の解決策がangular 7.2.9およびangular material/cdk 7.3.5

それは私にとってはうまくいかなかったので、少し苦労した後、cdkDropListGroupディレクティブを使ってなんとか動作させることができました。すべてのcdkDropListcdkDropListGroup内でアイテムをドロップできます。 cdkDropListConnectedToプロパティでドロップリストを接続する必要がなくなりました

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>
3
Alty

コンポーネント1

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

コンポーネント2

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

両方のコンポーネントの共有サービス

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);
        }
    }

親コンポーネント

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

両方のコンポーネントからドロップメソッドを呼び出す

drop(event: CdkDragDrop<string[]>) {
      this.sharedService.drop(event);
  }
0
sumit singh