how to change the color of a div element when an image is dragged onto it?

Question

I am uploading an image using an input tag and fileReader. I have made the image draggable using drag and drop API of angular material. Also, there are 2 divs. The following code shows it.

 <input type="file" (change)="fileChange($event)" placeholder="Upload file" >
    <img  id="blah" [src]="url" alt="your image" cdkDrag/>


<div class="box1">
    hi
</div>

<div class="box2">
    hi
</div>
<div class="box3">
    hi
</div>

My requirement is that, when I drag the image into one of the div boxes, the color of the div should change. Right now I am able to drag the image into the div boxes but how do I change the color of the div when the image is dragged on to it.

Answer 1

From the code provided, I have the following idea.

Steps:

1. check which parent node is the related div by using document.querySelector('#blah').parentNode
2. assign the related DOM to a variable as follow: const divNeeded = document.querySelector('#blah').parentNode
3. Suppose you have some color defined in your css file, let say it is called relatedStyle , you can add it to divNeeded by using .classList.add('relatedStyle') .

Example for the style in CSS file:

.relatedStyle{
 background-color: blue
}