如何防止音频文件丢失？

【问题标题】：How to prevent drop of audio file?如何防止音频文件丢失？
【发布时间】：2020-08-11 15:03:15
【问题描述】：

如何监听整个页面上的文件丢失？我已经尝试过类似的方法来停止放置（使用 document、document.body、window...）：

document.addEventListener("drop", evt => {
  evt.preventDefault(); 
  evt.stopPropagation(); 
  console.log("drop", evt);
  debugger; 
})

它不像我预期的那样工作。如果我将音频文件放到页面上，它将打开并播放。

【问题讨论】：

令人惊讶的解决方案是你需要“drop”和“dragover”，见stackoverflow.com/questions/6756583/…
这当然是一个非常笨拙的解决方案。 CSS4 似乎提供了更好的解决方案。

标签： javascript drag-and-drop addeventlistener

【解决方案1】：

在这种情况下，您需要监听器“dropend”，它会在某个元素中的放置完成时进行监听。

window.addEventListener("dragend", () => {
	alert("element throw in the window")
})

#draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }

<div class="dropzone">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        Drag to the white zone
    </div>
</div>

【讨论】：