JSFiddle - React, Tailwind, and code Playground
HTML
<div class="dropzone" id="droptarget" draggable="true" >
Drag image to this target. In Firefox version 109, left image below causes a Files entry in drop event as if drag source was a real file upload, but right image does not.
</div>
<img draggable="true" id="urlImage" class="draggable" style="height: 100px" src="https://f.vividscreen.info/soft/4b6a5b4b7a9efe46e38faac9fa52aa0e/Pembroke-Welsh-Corgi-320x240.jpj" />
<img draggable="true" id="svgImage" class="draggable" style="height: 100px" src="https://assets.mofoprod.net/static/_images/mozilla-on-black.9aed40133293.svg" />
<div class="dropfiles"><code id="dropfiles"></code></div>
CSS
body {
/* Prevent the user selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
border: 2px solid;
}
.dropzone {
width: 300px;
height: auto;
background: lightblue;
margin: 10px;
padding: 10px;
font-family: sans-serif;
}
.dropfiles {
width: auto;
height: 5am;
border: 2px solid green;
margin: 10px;
padding: 10px;
}
JavaScript
let dragged = null;
const target = document.getElementById("droptarget");
const msg = document.getElementById("dropfiles");
target.addEventListener("dragover", (event) => {
// prevent default to allow drop
event.preventDefault();
});
target.addEventListener("click", (event) => {
msg.innerHTML = "";
});
target.addEventListener("drop", (event) => {
// prevent default action (open as link for some elements)
event.preventDefault();
msg.innerHTML = "Drop Event:<br />";
// list dragged files
if (event.dataTransfer) {
files = event.dataTransfer.files;
if (files) {
for(var i = 0; i < files.length; i++) {
// move dragged element to the selected drop target
msg.innerHTML += "File: " + files[i].name + " [" + files[i].type + "]" + "<br />";
}
}
else {
msg.innerHTML += "No files";
}
} else {
msg.innerHTML += "<br />No dataTransfer";
}
});