Typescript：“EventTarget”类型上不存在属性“className”

Question

I am using draggable in my code like this: First to create and append the element:

let myImg = document.createElement("img");
myImg.setAttribute('src', ...);
myImg.id = some_value;
myImg.className = "store_img";
myImg.draggable = true;

myImg.addEventListener('dragstart',function(event){
    event.dataTransfer?.setData("text", somedata);
    myImg.style.opacity = "0.5";

myImg.addEventListener('dragend',function(){
    mask.style.opacity = "1";
   
document.getElementById("myStorageDiv")?.appendChild(myImg);

After that, somewhere else I modify the "myStorageDiv" to allow accepting the draggable:

document.getElementById("myArea")?.addEventListener('dragenter', 
function(event){
    event.preventDefault();
    if(event.dataTransfer?.getData("className") == "store_img"){
        this.style.backgroundColor = "red";
    }
}, false);

the last line tells me className not exist on 'EventTarget'. The reason I want to use it is I have two types of draggable, each one only allowed for one area, I want those areas to identify where the draggable comes from before making any changes, ex.'if(event.target.className == "StoreImg"){...}'. I also notice dataTransfer's data can only be used in Drop, so I can't pass the className for others like dropenter and dropleave. Is there any alternative ways for doing it? Thanks!

Answer 1

Let's see if I understand your issue correctly, you want to change the class for myImg based on an event and also test which class does it currently have, right?

TypeScript aside, this should be easily achiavable, here's an example (try dragging the image):

 const myImg = document.querySelector("#my-img"); myImg.addEventListener("dragstart", () => { if (myImg.className == "blue") { alert("Element was blue, I guess."); } myImg.className = "red"; })

 .blue { border-style: solid; border-width: 10px; color: blue; }.red { border-style: solid; border-width: 10px; color: red; }

 <img id="my-img" class="blue" src="https://www.gravatar.com/avatar/95686594a8e10ec60422e9478e9d1785"></img>

Does that work for you or do you get some TypeScript error? If you do you can post it here and I'll try to help.