title: Angular CDK: Make cdkDropList items draggable?
body: <p>Recently, I'm working on a scenario which allow user can drag item from one container into drop zone to store items. It would be a way like draw.io does.</p>
  <p>However, the items in cdkDropList is sticky. It would not be able to move around.</p>
  <pre><code>&lt;div class=&quot;left-panel&quot;&gt;
          &lt;h6&gt;container&lt;/h6&gt;
          &lt;div class=&quot;widget-container&quot; 
          cdkDropList
          [id]=&quot;'container'&quot;
          [cdkDropListData]=&quot;customWidgets&quot;
          [cdkDropListConnectedTo]=&quot;['container', 'artBoard']&quot;
          &gt;
              &lt;div cdkDrag&gt;&lt;svg height=&quot;50&quot; width=&quot;50&quot;&gt;
              &lt;rect width=&quot;50&quot; height=&quot;50&quot; style=&quot;fill:rgb(0,0,255);stroke- width:3;stroke:rgb(0,0,0)&quot; /&gt;
              &lt;/svg&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
      &lt;/div&gt;
  </code></pre>
  <pre><code>&lt;div class=&quot;middle-workspace&quot;&gt;
          &lt;div class=&quot;svg-container&quot; style=&quot;width:300px;height:300px;border-style: dotted;&quot; 
          cdkDropList 
          [id]=&quot;'artBoard'&quot; 
          [cdkDropListData]=&quot;artBoardWidges&quot; 
          [cdkDropListConnectedTo]=&quot;['container', 'artBoard']&quot;
          (cdkDropListDropped)=&quot;onTalkDrop($event)&quot;
          &gt;
              &lt;app-widget-rect cdkDragBoundary=&quot;.svg-container&quot; *ngFor=&quot;let artBoardWidge of artBoardWidges&quot;&gt;&lt;/app-widget-rect&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p><strong>Updated 06/26-02:25</strong>
  Thanks for replying from @FunkMonkey33</p>
  <p>The following code below is my dragHandler, apparently it will copy the original item from its container to target container.</p>
  <pre><code>onTalkDrop(event: CdkDragDrop&lt;Widget[]&gt;) {
      // In case the destination container is different from the previous container, we
      // need to transfer the given task to the target data array. This happens if
      // a div has been dropped on a different dropList.
      if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      } else {
        copyArrayItem(event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex);
      }
    }
  </code></pre>