title: Angular cdkDropList drag element restriction
body: <p>I am currently using Angular 2 and a drag and drop module from <a href="https://material.angular.io/cdk/drag-drop/overview" rel="nofollow noreferrer">https://material.angular.io/cdk/drag-drop/overview</a>. 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.</p>
  
  <p>This could very likely be solved with grouping the lists but since I am using recursion other issues came up...</p>
  
  <p>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).</p>
  
  <p>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...</p>
  
  <p>I have the following:</p>
  
  <p>Classes:</p>
  
  <pre><code>export class Attribute {
  name: string;
  type: string;
  
  }
  
  export class Element {
      id: number;
      name: string;
      elements: Element[]
      attributes: Attribute[];
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div &gt; 
  Elements             
  &lt;div
    cdkDropList    
    [cdkDropListData]="elements"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    [cdkDropListEnterPredicate]="isElement"&gt;
  &lt;div type="button" text-align="right" class="btn btnNotInline" (click)="addNewElement()"&gt;
    &lt;img src="assets/img/IconPlus.png" class="elementListIcon"&gt;&lt;/div&gt;
  &lt;div *ngFor="let element of elements" class="example-box" cdkDrag&gt;
    &lt;mat-list&gt;
      &lt;mat-list-item&gt; 
        &lt;mat-form-field appearance="standard dense" class="example-container"&gt;
          &lt;input matInput placeholder="{{element.name}}"&gt; 
        &lt;/mat-form-field&gt;
      &lt;/mat-list-item&gt;
      &lt;mat-list-item&gt;
        &lt;div
          cdkDropList
          [cdkDropListData]="attributes"
          class="cdk-drag-list-attributes"
          (cdkDropListDropped)="drop($event)"
          [cdkDropListEnterPredicate]="isAttribute"&gt;
          &lt;div type="button" text-align="right" class="btn btnNotInline" (click)="addNewAttribute()"&gt;
            &lt;img src="assets/img/IconPlusPurple.png" class="elementListIcon"&gt;&lt;/div&gt;
          &lt;div *ngFor="let attribute of attributes" class="example-container" cdkDrag&gt;
            &lt;p class="mat-input-element-attribute"&gt;  
              &lt;input matInput placeholder="{{attribute.name}}"&gt;
              &lt;input matInput placeholder="{{attribute.type}}"&gt;
            &lt;/p&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/mat-list-item&gt;
      &lt;mat-list-item&gt; 
          &lt;app-listboardelement [attributes]="element.attributes" [elements]="element.elements"&gt;&lt;/app-listboardelement&gt;
      &lt;/mat-list-item&gt;
    &lt;/mat-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>The ts. method being called (the attribute looks alike)</p>
  
  <pre><code>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);
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>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</p>
  
  <p>EDIT:
  Added image for presentation of how it is displayed - but does not work properly;
  <a href="https://i.stack.imgur.com/TYDNdm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TYDNdm.png" alt="enter image description here"></a></p>