title: Drag-Drop list transfer between components by dropping on navigation label of destination component
body: <p>I'm trying to figure out how to drop an element from one list onto a <code>&lt;div&gt;</code> and have that item change lists.</p>
  
  <p>The goal is to be able to drop items from one list onto the labels in a sidebar navigation and have the item be switched to the list on that destination page.</p>
  
  <p>I've attempted implementing a very simple proof of concept on stackblitz, but to no avail. </p>
  
  <p>Is it possible to drop an item to a given div (even one that doesn't display a list) and have that item switch lists?</p>
  
  <p>Here's the link to the stackblitz: <a href="https://stackblitz.com/edit/angular-special-drop-zone" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-special-drop-zone</a></p>
  
  <p>In the stackblitz, I'm trying to be able to drop items from the TODO list onto the DONE header and have them added to the DONE list.</p>
  
  <p>EDIT: Here's a GIF of what I'm trying to accomplish. Upon dropping onto 'Backlog' in the side nav, I want it to switch to the backlog list. </p>
  
  <p><a href="https://i.stack.imgur.com/aRYfA.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aRYfA.gif" alt="enter image description here"></a></p>