Угловое ограничение элемента перетаскивания cdkDropList - PullRequest
Новая
       26

Угловое ограничение элемента перетаскивания cdkDropList

0 голосов
/ 25 ноября 2018

В настоящее время я использую Angular 2 и модуль перетаскивания из https://material.angular.io/cdk/drag-drop/overview. Я сделал так, чтобы функции перетаскивания работали.У меня есть два разных типа объектов классов, которые я хотел бы ограничить их собственными типами списков перетаскивания.

Вероятно, это можно решить с помощью группировки списков, но, поскольку я использую рекурсию, возникли другие проблемы...

В настоящее время у меня есть все списки в одной и той же группе, что означает, что в каждом списке можно перетаскивать что угодно (cdkDropListGroup, помещается в компонент перед выполнением рекурсивной части).

Я пытаюсь ограничить списки, чтобы они принимали только Элемент или Атрибут (но не оба), но я не знаю, как это сделать ...

У меня есть следующее:

Классы: 

export class Attribute {
name: string;
type: string;

}

export class Element {
    id: number;
    name: string;
    elements: Element[]
    attributes: Attribute[];

}

HTML: 

<div > 
Elements             
<div
  cdkDropList    
  [cdkDropListData]="elements"
  class="example-list"
  (cdkDropListDropped)="drop($event)"
  [cdkDropListEnterPredicate]="isElement">
<div type="button" text-align="right" class="btn btnNotInline" (click)="addNewElement()">
  <img src="assets/img/IconPlus.png" class="elementListIcon"></div>
<div *ngFor="let element of elements" class="example-box" cdkDrag>
  <mat-list>
    <mat-list-item> 
      <mat-form-field appearance="standard dense" class="example-container">
        <input matInput placeholder="{{element.name}}"> 
      </mat-form-field>
    </mat-list-item>
    <mat-list-item>
      <div
        cdkDropList
        [cdkDropListData]="attributes"
        class="cdk-drag-list-attributes"
        (cdkDropListDropped)="drop($event)"
        [cdkDropListEnterPredicate]="isAttribute">
        <div type="button" text-align="right" class="btn btnNotInline" (click)="addNewAttribute()">
          <img src="assets/img/IconPlusPurple.png" class="elementListIcon"></div>
        <div *ngFor="let attribute of attributes" class="example-container" cdkDrag>
          <p class="mat-input-element-attribute">  
            <input matInput placeholder="{{attribute.name}}">
            <input matInput placeholder="{{attribute.type}}">
          </p> 
        </div>
      </div>
    </mat-list-item>
    <mat-list-item> 
        <app-listboardelement [attributes]="element.attributes" [elements]="element.elements"></app-listboardelement>
    </mat-list-item>
  </mat-list>
</div>

тс.вызываемый метод (атрибут выглядит одинаково) 

isElement(drag : CdkDrag){
      console.log("check " + (drag instanceof Element) +  typeof drag + " , "+ typeof drag.data + ", "+ drag.data + " , " +(drag.data instanceof Element));
      return (drag.data instanceof Element);
    }

из вывода, который я просто получаю: «проверить ложный объект, неопределенный, неопределенный, ложный». Из этого я попытался сравнить перетаскиваемый объект с классом.... но мне не повезло.

Можно ли как-нибудь динамически ограничить перетаскиваемый объект определенными списками?Я знаю о [cdkDropListConnectedTo], но это вызвало у меня проблемы с происходящей рекурсией и привязками.Любое руководство будет приветствоваться

РЕДАКТИРОВАТЬ: Добавлено изображение для представления того, как оно отображается - но не работает должным образом;enter image description here

1 Ответ

0 голосов
/ 25 ноября 2018

Вы всегда можете проверить контейнеры drag-n-drop 'origin to destination' и принять соответствующие меры, например: 

  drop(event: CdkDragDrop<string[]>) {
    // same container (just reorder items)
    if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
        // from first list to second list
        if (event.previousContainer.id === 'cdk-drop-list-0' && event.container.id === 'cdk-drop-list-1') {
            // do something
        }
        // from second list to first list
        if (event.previousContainer.id === 'cdk-drop-list-1' && event.container.id === 'cdk-drop-list-0') {
            // do something
        }
    }
}

Надеюсь, это поможет!

...