title: how to drag and drop an image using angular material?
body: <p>I am accepting an image as an input and intend to drag and drop it to another container(in my case a div tag).However i am unable to do so.
  The following code shows:</p>
  
  <pre><code>&lt;input type="file" (change)="fileChange($event)" placeholder="Upload file" &gt;
  &lt;div class="box1" 
  cdkDropList 
  #image="cdkDropList" 
  [cdkDropListConnectedTo]="nextblock"
  (cdkDropListDropped)="onDrop($event)"
  &gt;
  &lt;img  id="blah" [src]="url" alt="your image" cdkDrag/&gt;
  &lt;/div&gt;
  
  &lt;div  class="box2" cdkDropList #nextblock="cdkDropList" [cdkDropListConnectedTo]="'image'" (cdkDropListEntered)="setColor()"&gt;
  Box1
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea on how can I implement it?</p>