Как изменить цвет элемента Div, когда изображение перетаскивается на него?

Question

Я загружаю изображение, используя тег ввода и fileReader. Я сделал изображение перетаскиваемым с помощью API перетаскивания из angular материала. Также есть 2 деления. Следующий код показывает это.

 <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>

Мое требование состоит в том, чтобы при перетаскивании изображения в один из блоков div цвет элемента div изменялся. Прямо сейчас я могу перетащить изображение в блоки div, но как мне изменить цвет div, когда изображение перетаскивается на него?

Answer 1

Из предоставленного кода у меня есть следующая идея.

Шаги:

1. проверить, какой родительский узел является связанным div, используя document.querySelector('#blah').parentNode
2. назначить связанный DOM для переменной следующим образом: const divNeeded = document.querySelector('#blah').parentNode
3. Предположим, у вас есть определенный цвет, определенный в вашем файле css, скажем, он называется relatedStyle, вы можете добавить его к divNeeded, используя .classList.add('relatedStyle').

Пример стиля в файле CSS:

.relatedStyle{
 background-color: blue
}