Перетащите пользовательские компоненты stati c, используя Angular Material CDK - PullRequest
Новая
       106

Перетащите пользовательские компоненты stati c, используя Angular Material CDK

2 голосов
/ 14 июля 2020

Что касается Angular CDK Drag & Drop, я пытаюсь создать простую панель управления с левой боковой панелью и областью основного содержимого. Обе эти области будут содержать уникальные пользовательские компоненты, которые необходимо перетаскивать, и их можно переупорядочивать в пределах их внутренней области и переносить в другую область.

Например. Боковая панель содержит Comp и Comp1, затем я могу изменить их порядок в этой области и перенести в область основного содержимого.

Насколько я понимаю Angular Материал CDK Drag & Drop работает только со списками. Кроме того, элементы в списках должны быть одного типа, чтобы их можно было переупорядочить / передать.

Есть ли способ использовать CDKDrag и CDKDropList для c элементов вместо элементов в массиве? Я не могу переупорядочивать или переносить пользовательские компоненты в разные выпадающие списки.

Я создал образец проекта: https://stackblitz.com/edit/ng-mat-dnd Демо: https://ng-mat-dnd.stackblitz.io/

app.component. html

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

    <div cdkDropList #sidebarList="cdkDropList" [cdkDropListData]="sidebar" cdkDropListConnectedTo="[mainList]"
        class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" cdkDrag>
            <app-demo-comp-2 [btn]=2></app-demo-comp-2>
        </div>
        <div class="example-box" cdkDrag>
            <app-demo-comp [ddn]=2></app-demo-comp>
        </div>
        <div class="example-box" cdkDrag>
            <app-demo-comp-3 [txt]=3></app-demo-comp-3>
        </div>
    </div>
</div>

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

    <div cdkDropList #mainList="cdkDropList" [cdkDropListData]="main" cdkDropListConnectedTo="[sidebarList]"
        class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" cdkDrag>
            <app-demo-comp [ddn]=1></app-demo-comp>
        </div>
        <div class="example-box" cdkDrag>
            <app-demo-comp-2 [btn]=3></app-demo-comp-2>
        </div>
    </div>
</div>

app.component.ts 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
  sidebar;
  main;

  @ViewChildren(CdkDrag) draggables: QueryList<CdkDrag>;

  constructor() { }

  ngOnInit() { }

  ngAfterViewInit() {
    console.log(this);
    this.sidebar = [this.draggables.toArray()[0], this.draggables.toArray()[1], this.draggables.toArray()[2]];
    console.log(this.sidebar);
    
    this.main = [this.draggables.toArray()[4], this.draggables.toArray()[3]];
    console.log(this.main);
  }

  drop(event: CdkDragDrop<any[]>) {
    console.log(event);
    if (event.previousContainer === event.container) {
      console.log('Same container');
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      console.log('Different containers');
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

1 Ответ

1 голос
/ 04 августа 2020

Angular Функциональность перетаскивания cdk материала работает так же, когда он восстанавливает видимость элемента и вставляет его в его старую позицию в DOM .

Важно, чтобы они сохраняют позицию , потому что они передают ngFor директиву , и перемещение элемента в DOM может сбрасывать NgFor, который выполняет умное различие и воссоздает элементы только тогда, когда необходимо .

Это означает, что если вы хотите, чтобы он работал без ngFor, тогда вам нужно перемещать html элементов самостоятельно.

Вот пример того, как это можно сделать :

Stackblitz с ручными манипуляциями с домом 

drop(event: CdkDragDrop<any[]>) {
  const nodeToMove = event.item.element.nativeElement;
  const { previousContainer, container, previousIndex, currentIndex } = event;

  console.log(this.sidebar, this.main);

  if (previousContainer === container) {
    moveItemInArray(container.data, previousIndex, currentIndex);

    moveWithinContainer(
      container.element.nativeElement,
      previousIndex,
      currentIndex
    );
  } else {
    transferArrayItem(
      previousContainer.data,
      container.data,
      previousIndex,
      currentIndex
    );
    transferNodeToContainer(
      nodeToMove,
      container.element.nativeElement,
      currentIndex
    );

    Promise.resolve().then(() => {
      previousContainer.removeItem(event.item);
      event.item.dropContainer = container;
      event.item._dragRef._withDropContainer(container._dropListRef);
      container.addItem(event.item);
    });
  }
}

...

function moveWithinContainer(container, fromIndex, toIndex) {
  if (fromIndex === toIndex) {
    return;
  }

  const nodeToMove = container.children[fromIndex];
  const targetNode = container.children[toIndex];

  if (fromIndex < toIndex) {
    targetNode.parentNode.insertBefore(nodeToMove, targetNode.nextSibling);
  } else {
    targetNode.parentNode.insertBefore(nodeToMove, targetNode);
  }
}

function transferNodeToContainer(node, container, toIndex) {
  if (toIndex === container.children.length) {
    container.appendChild(node);
  } else {
    const targetItem = container.children[toIndex];
    targetItem.parentNode.insertBefore(node, targetItem);
  }
}

NgFor

Как вы могли заметить, приведенное выше решение немного взломано и может быть взломано в зависимости от версии библиотеки.

Вместо этого вы можете использовать директиву ngFor:

ts 

sidebar = [0, 1, 2];
main = [0, 1];

html

 <div *ngFor="let item of sidebar" class="example-box" cdkDrag>
    <app-demo-comp-2 *ngIf="item === 0" [btn]=2></app-demo-comp-2>

    <app-demo-comp *ngIf="item === 1" [ddn]=2></app-demo-comp>

    <app-demo-comp-3 *ngIf="item === 2" [txt]=3></app-demo-comp-3>
 </div> 

 ...
 <div *ngFor="let item of main" class="example-box" cdkDrag>
    <app-demo-comp *ngIf="item === 0" [ddn]=1></app-demo-comp>

    <app-demo-comp-2 *ngIf="item === 1" [btn]=3></app-demo-comp-2>
 </div>

Stackblitz с NgFor реализация

...