title: How to transfer items to new list using Angular DragDrop CDK Service
body: <p>I have a certain situation where I need to create a multi-list drag and drop in my project using the <code>DragDrop</code> service provided by Angular CDK. I am able to successfully move items around within its parent list, but when I try and transfer that item to a new list, I've discovered that the <code>_draggables</code> property does not update to transfer the item to the new list. Therefore, once I move the item to a new list, I can no longer drag it.</p>
  
  <p>StackBlitz demo of the problem: <a href="https://stackblitz.com/edit/angular-kj7y4p" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-kj7y4p</a></p>
  
  <p><img src="https://media.giphy.com/media/Za2T3ufb976pfLDusw/giphy.gif" alt="Alt Text"></p>
  
  <p>In this gif, I drag <code>Get To Work</code> to the second list, but I cannot pick it up after I drop it in the new list. At the very end I show that I <strong>can</strong> pick up the list item <code>Get Up</code> above it though (since that one was already in the array).</p>
  
  <p>I create each list group like so:</p>
  
  <pre><code>const dropListRef1 = this.dragDrop.createDropList&lt;string[]&gt;(this.dropList1);
  
  const dragListItems1: DragRef&lt;any&gt;[] = [];
  
  this.dragItems1.forEach((item) =&gt; {
    let dragRef = this.dragDrop.createDrag(item);
    dragRef.data = item.nativeElement.innerHTML
    dragListItems1.push(dragRef);
  })
  
  dropListRef1.data = this.todo
  
  dropListRef1.withItems(dragListItems1);
  </code></pre>
  
  <p>I listen for the dropped event, by subscribing to <code>dropped</code>:</p>
  
  <pre><code>dropListRef1.dropped.subscribe((event) =&gt; {
    this.drop(event);
  })
  </code></pre>
  
  <p>This <code>event</code> is then used to either transfer the item to a new array or move the item within the array:</p>
  
  <pre><code>drop(event: any) {
    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);
    }
  }
  </code></pre>
  
  <p>What configuration am I missing to make this work properly? Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <hr>
  
  <p>Here's why I'm using <code>cdkDrag</code> service instead of just the directives.</p>
  
  <p>Given the following data from my api:</p>
  
  <pre><code>var sections = [
    {
      "uid": "a",
      "order": 0,
      "layout": {
        "rows": [
          {
            "uid": "qz",
            "columns": [
              {
                "uid": "ugjm",
                "size": 6,
                "blocks": [ // NOTE: BLOCK WITH A COLUMN AS PARENT
                  {
                    "uid": "bh",
                    "data": {
                      "content": "row qz, column ugjm, block bh"
                    },
                    "type": 2,
                    "order": 0
                  }
                ]
              },
              {
                "uid": "plm",
                "size": 6,
                "rows": [ // NOTE: ROW WITH A COLUMN AS PARENT
                  {
                    "uid": "bzx",
                    "columns": [
                      {
                        "uid": "1cd",
                        "size":  6,
                        "blocks": [
                          {
                            "uid": "nbv",
                            "data": {
                              "content": "row qz, row bzx, column 1cd, block nbv"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
        ],
        "columns": 12
      },
    }
  ]
  </code></pre>
  
  <p>I need to render these rows and columns on the page, to do this, I use <code>ngTemplateOutlets</code> to render the correct html elements on the page:</p>
  
  <pre><code>  &lt;app-kit-section *ngFor="let section of sections" class="kit-section" [data]="section"&gt;
      &lt;ng-container *ngIf="section.layout"&gt;
          &lt;ng-template [ngTemplateOutlet]="recursiveTmpl" [ngTemplateOutletContext]="{ $implicit: section.layout }"&gt;&lt;/ng-template&gt;
      &lt;/ng-container&gt;
    &lt;/app-kit-section&gt;
  </code></pre>
  
  <p>Then I look for which template to select here:</p>
  
  <pre><code>&lt;ng-template #recursiveTmpl let-element&gt;
  
    &lt;ng-container *ngIf="element.rows &amp;&amp; element.rows.length"&gt;
      &lt;ion-row *ngFor="let row of element.rows"&gt;
        &lt;ng-template [ngTemplateOutlet]="recursiveTmpl" [ngTemplateOutletContext]="{ $implicit: row }"&gt;&lt;/ng-template&gt;
      &lt;/ion-row&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container *ngIf="element.columns &amp;&amp; element.columns.length"&gt;
      &lt;ion-col *ngFor="let column of element.columns"&gt;
        &lt;ng-template [ngTemplateOutlet]="recursiveTmpl" [ngTemplateOutletContext]="{ $implicit: column }"&gt;&lt;/ng-template&gt;
      &lt;/ion-col&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container *ngIf="element.blocks &amp;&amp; element.blocks.length"&gt;
        &lt;div *ngFor="let block of element.blocks"&gt;
          &lt;ng-template [ngTemplateOutlet]="textTpl" [ngTemplateOutletContext]="{ $implicit: block }"&gt;&lt;/ng-template&gt;
        &lt;/div&gt;
    &lt;/ng-container&gt;
  
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>This renders an assortment of nested rows and columns on the page:</p>
  
  <p><img src="https://i.stack.imgur.com/Deiqg.png" alt="alt-text"></p>
  
  <p>This...was why i simplified my question and why i need to use the <code>cdkService</code>.</p>