Драгентское событие не надежно стреляет, когда мышь входит в зону выброса ⇐ CSS

[Anonymous]

Если вы посмотрите на SSCCE ниже, вы увидите, что когда файлы перетаскиваются из-за пределов моей зоны, атрибут CSS-Фамин-Время изменяется, и цель начинает пульсировать, поэтому пользователь знает, что пришло время отказаться от пакета. Проблема в том, что он не кажется на 100% надежным, поскольку событие Dragenter не всегда стреляет. Или, может быть, «только один раз» драгвер для событий, чтобы сделать то, что делал DrageNter?

Код: Выделить всё

document.addEventListener("DOMContentLoaded", (e) => {
document.addEventListener('drop', function(e) {
e.preventDefault()
})
document.addEventListener('dragenter', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "none"
})
document.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "none"
})

const dropZone = document.getElementById("container")
dropZone.addEventListener("dragenter", (e) => {
console.log("In enter " + dropZone)
e.dataTransfer.dropEffect = "copy"
e.preventDefault()
e.stopPropagation()
document.getElementById("div2").style.setProperty("--fade-time", "2.0s")
})
dropZone.addEventListener("dragover", (e) => {
console.log("In over " + dropZone)
e.dataTransfer.dropEffect = "copy"
e.preventDefault()
e.stopPropagation()
})
dropZone.addEventListener("dragleave", (e) => {
console.log("In leave")
e.dataTransfer.dropEffect = "none"
e.preventDefault();
document.getElementById("div2").style.removeProperty("--fade-time")
})
dropZone.addEventListener("drop", catchFiles)
})

function catchFiles(e) {
e.preventDefault();
document.getElementById("div2").style.removeProperty("--fade-time")
console.log("File(s) dropped");

let fileHolder = new FormData()
let fileCount = 0

if (e.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
[...e.dataTransfer.items].forEach((item, i) => {
// If dropped items aren't files, reject them
if (item.kind === "file") {
const file = item.getAsFile()
console.log(`… file[${i}].name = ${file.name}`)
fileHolder.append("file" + i, file, file.name)
fileCount++
}
});
} else {
// Use DataTransfer interface to access the file(s)
[...e.dataTransfer.files].forEach((file, i) => {
console.log(`… file[${i}].name = ${file.name}`);
fileHolder.append("file" + i, file, file.name)
fileCount++
});
}
if (fileCount == 0) {
alert("Zero files received")
return
}
alert("got " + fileCount + " files")
return
const abortControl = new AbortController();
const signal = abortControl.signal;
const fetchOpts = {
signal: signal,
method: 'POST',
body: fileHolder,
cache: "no-cache"
};
const response = fetch("https://localhost:7196/upload/PostFormData", fetchOpts).catch(
err =>  {
console.log("Upload failed: " + err.message);
return
});
if (signal.aborted) {
alert("Cancelled")
return
}

}< /code>
#container {
position: relative;
display: flex;
width: 120px;
height: 120px;
padding: 10px;
border: 1px solid black;
}

#div1 {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: lightblue;
cursor: url("data:image/svg+xml;utf8,"), auto;
}

#div2 {
--fade-time: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("data:image/svg+xml;utf8,");
animation: pulseImage var(--fade-time) infinite;
}

body>p {
color: red;
}

div>p {
font-weight: bold;
}

@keyframes pulseImage {
from {
opacity: 0;
}

to {
opacity: 0.7;
}
}< /code>
File Drop Upload Example

Drag your file(s) into the Drop Zone


File Drop Zone

Подробнее здесь: https://stackoverflow.com/questions/797 ... -drop-zone