Angular cdkDropList drag element restriction

Question

I am currently using Angular 2 and a drag and drop module from https://material.angular.io/cdk/drag-drop/overview. I have made the drag and drop features work. I have two different types of class objects that i desire to be limited to their own types of drag and drop lists.

This could very likely be solved with grouping the lists but since I am using recursion other issues came up...

Currently I am having every lists inside the same group, meaning that anything can be dragged and dropped in every list (cdkDropListGroup, is positioned in a component before the recursion part is performed).

I am trying to make the lists restricted to only accept either Element or Attribute (but not both), but I have no idea of how to do this...

I have the following:

Classes:

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>

The ts. method being called (the attribute looks alike)

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

from the output I simply gets: "check false object , undefined, undefined , false" From this I have tried to compare the dragged object with a class.. but I didn't have any luck.

Is there any way I can limit dragged object to certain lists dynamically? I know about [cdkDropListConnectedTo] but this gave me issues with the occuring recursion and the bindings. Any guidance would be appreciated

EDIT: Added image for presentation of how it is displayed - but does not work properly;

score 0 · Answer 1 · answered Nov 25 '18 at 15:42

0

You can always check the drag-n-drop 'origin to destination' containers and take action accordingly, something like :

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

Hope this helps!

answered Nov 25 '18 at 15:42

freepowder

440
2
6

I appreciate the response, but I am currently working with list generated from recursion, so (currently) no id's are set. Previously i did generate an ID but I was unable to make the links or such dynamic... Is it possible to do this example of yours towards an Array of IDs? – Skdy Nov 25 '18 at 15:51
Would you mind to share stackblitz code? have couple of ideas on how to sort out this thing but hard to check without been able to reproduce correctly on my end and just guessing. Thanks! – freepowder Nov 25 '18 at 16:10
I gotta be honest, I have never used stackblitz but I gave it a try and threw in the code / formated it as much as possible. Included dependencies but errors occur upon cdk library usages... If you could bypass that error the code "Should" work to an extend.. I can post an image of how it works locally atm. https://stackblitz.com/edit/angular-srbezs?embed=1&file=src/app/listboardelement/listboardelement.component.html – Skdy Nov 25 '18 at 17:06

score 0 · Answer 2 · answered May 03 '21 at 18:26

The ts. method being called (the attribute looks alike)

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

drag.data does not work, because you didn't assign any data to your cdkDrag via [cdkDragData]

<div *ngFor="let element of elements" class="example-box" cdkDrag [cdkDragData]="element">
 ...
</div>

To your question... You can either create two sets of cdkDropList arrays for elements and attributes and connect the list groups with the [cdkDropListConnectedTo] binding or connect all lists together in one array and allow the drop with the [cdkDropListEnterPredicate]="isElement" you already mentioned.

To solve the problem regarding recursion, you need to do some additional steps and check if the current drop container is the right one.

I've a detailed description in my question regarding nesting.

Angular Nested Drag and Drop / CDK Material cdkDropListGroup cdkDropList nested

Angular cdkDropList drag element restriction

2 Answers2