如何防止音频文件丢失？

Posted 2023-05-08

【中文标题】如何防止音频文件丢失？

【英文标题】：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”，见***.com/questions/6756583/…

这当然是一个非常笨拙的解决方案。 CSS4 似乎提供了更好的解决方案。

【参考方案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>