將圖像拖到 div 元素上時如何更改其顏色？

Question

我正在使用輸入標簽和 fileReader 上傳圖像。 我使用角材料的拖放 API 使圖像可拖動。 此外，還有2個div。 以下代碼顯示了它。

 <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 上時更改 div 的顏色。

Answer 1

根據提供的代碼，我有以下想法。

腳步：

1. 使用document.querySelector('#blah').parentNode檢查哪個父節點是相關的 div
2. 將相關的 DOM 分配給一個變量，如下所示： const divNeeded = document.querySelector('#blah').parentNode
3. 假設您在 css 文件中定義了一些顏色，假設它稱為relatedStyle ，您可以使用.classList.add('relatedStyle')將其添加到divNeeded 。

CSS 文件中的樣式示例：

.relatedStyle{
 background-color: blue
}