title: Angular Material Nested Drag and Drop
body: <p>I'm trying to achieve a reorder-able group of list which contain elements that can be moved between lists, using @angular/cdk/drag-drop, although I'm running into a few problems.</p>
  
  <p>I've managed to separately create individual examples which achieve the individual drag and drop, although when brought together it seems I cannot achieve both pieces of functionality in parallel.</p>
  
  <p><strong>Moving items between groups</strong>: <a href="https://stackblitz.com/edit/items-move" rel="noreferrer">https://stackblitz.com/edit/items-move</a></p>
  
  <p><strong>Reordering groups</strong>: <a href="https://stackblitz.com/edit/groups-move" rel="noreferrer">https://stackblitz.com/edit/groups-move</a></p>
  
  <p><strong>Both together</strong>: <a href="https://stackblitz.com/edit/groups-items-move" rel="noreferrer">https://stackblitz.com/edit/groups-items-move</a></p>
  
  <p>It seems in the <strong>Both together</strong> example, the dragging of individual items works as expected, but the re-ordering of the groups does not work, however, the <code>cdkDropListGroup</code> on line 4 of <code>cdk-drag-drop-connected-sorting-group-example.html</code> when moved outside the parent <code>&lt;cdk-drop-list&gt;</code> then causes the opposite to occur, the groups are now able to be reordered, but the items are then not able to be moved between groups.</p>
  
  <p>Any pointer as to where i'm going wrong?</p>