0

I have created and input box which is accepting an image as an input in one of the div tags. I also have another div defined to which i want to drag and drop the image.Any help? My code right now is:

div class="box1" 
cdkDropList 
#image="cdkDropList" 
[cdkDropListConnectedTo]="[nextblock]"
(cdkDropListDropped)="drop($event)"
[cdkDropListData]="url"
><input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img  id="blah" [src]="url" alt="your image" cdkDrag/>
</div>

<div  
class="box2" 
cdkDropList 
#nextblock="cdkDropList" 
[cdkDropListConnectedTo]="[image]" 
(cdkDropListDropped)="drop($event)" 
(cdkDropListEntered)="setColor()">
Box1
</div>

I am using angular drag and drop material.

RIni
  • 149
  • 4
  • 15
  • [This answer](https://stackoverflow.com/a/53422624/6481438) may help. – GCSDC Mar 23 '20 at 21:18
  • I tried this but i am getting an error on console as cannot read property "length of the undefined" which leads me to that "cdkDropListData" is needed.BUt how can i link an image to the cdkdroplistdata? any help on that – RIni Mar 24 '20 at 03:31
  • `cdkDropListData` should not be required for a simple drag and drop. If you're getting an error, you should also include it in detail in your question. – GCSDC Mar 24 '20 at 10:01
  • I have not used them,but was thinking if i could.My requirement is basically to drag and drop an image from one div box to another div box. – RIni Mar 24 '20 at 10:05
  • You should provide as much detail as you can on your question, including any error message you're facing. Also, I'm almost sure you may solve your issue based on the answer I pointed out on my previous comment. – GCSDC Mar 24 '20 at 15:54
  • @GCSDC i am still unable to move the image around.Any insights? – RIni Mar 25 '20 at 17:13
  • Without more information, it is hard to help. What did you try further? Are you getting any errors? What is the current behaviour? What exactly is not working? – GCSDC Mar 25 '20 at 20:44

0 Answers0