webentwicklung-frage-antwort-db.com.de

Verwendung von Angular7 (eckiges Material) Ziehen Sie zwischen zwei Komponenten

Wie vor kurzem eingeführt angular Drag & Drop in angular Material https://material.angular.io/cdk/drag-drop/overview .

Alle Beispiele beschreiben mit in einer einzigen Komponente. So verwenden Sie dies in zwei verschiedenen Komponenten: Ziehen Sie ein Komponentenelement und legen Sie es in einer anderen Komponente ab.

13
Jomy Joseph

Sie können die Eigenschaften id und cdkDropListConnectedTo verwenden, um beide Listen zu verknüpfen:

Komponente 1:

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

Komponente 2:

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

Wenn Sie mehrere Listen zu einer Liste verbinden müssen, können Sie die folgende Syntax verwenden: [cdkDropListConnectedTo]="['list-1', 'list-2', 'list-3', 'list-4']"

Nach dem Verknüpfen der Listen müssen Sie je nach Aktion eine oder beide Listen korrekt aktualisieren. Du kannst es mit der Drop-Funktion wie folgt machen:

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

Wenn Sie Elemente zwischen Listen verschieben möchten, möchten Sie möglicherweise die Listen zentral verfolgen. Sie können dazu einen Dienst, ein Geschäft oder andere Methoden verwenden.

23
GCSDC

Ich bin nicht sicher, ob die obige Lösung noch mit angular 7.2.9 und angular material/cdk 7.3.5 funktioniert

Es hat bei mir nicht funktioniert und daher habe ich es nach einiger Zeit geschafft, es mit der Direktive cdkDropListGroup zum Laufen zu bringen. Alle cdkDropList innerhalb cdkDropListGroup stehen zum Ablegen von Elementen zur Verfügung. Sie müssen Drop Lists nicht mehr mit der Eigenschaft cdkDropListConnectedTo verbinden

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

Component1

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

Komponente 2

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

gemeinsamer Dienst für beide Komponenten

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

Elternkomponente

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

rufen Sie die drop-Methode von beiden Komponenten aus auf

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