Question

我正在收听drop事件并正在执行e.preventDefault()但它正在尝试打开已删除的文件。它一直工作到昨天。但就在今天它因某些未知原因而破产。我做了一个JsFiddle#bwquR/10来反映相同的内容。

编辑：

如果您不接受dragover事件drop，则无法处理。即使在小提琴中如果你评论dragover它也行不通在实际工作中，我错过了dragover的拼写但如果没有drop

，它仍然是一个问题dragover将无效

小提琴实际上是在工作，但是身体很小（只有文字DROP）。它仅在drop文本不在整个身体上的那个小区域上进行DROP事件。所以我觉得它不起作用。抱歉混淆。

Answer 1

我想这是因为没有dragOver事件处理程序，会使用dragOver事件的默认事件处理程序，因此，之后不会触发drop事件。在放置事件之前，需要e.preventDefault用于dragOver事件。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations

如果要允许丢弃，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回false，或者通过调用事件的event.preventDefault方法来执行此操作。后者在单独脚本中定义的函数中可能更可行。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

在dragenter和dragover事件期间调用preventDefault方法将指示在该位置允许丢弃。但是，您通常希望仅在某些情况下调用preventDefault方法，例如，仅在拖动链接时调用。要执行此操作，请调用检查条件的函数，并仅在满足条件时取消事件。如果不满足条件，请不要取消该事件，如果用户释放鼠标按钮，则不会发生丢弃。

https://developer.mozilla.org/en-US/docs/Web/Events/dragover

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

Answer 3

我不确定我是否正确理解你的问题，但是如果你想阅读删除的文件，你需要处理dragover事件并至少放在这行代码中：

evt.dataTransfer.dropEffect = 'copy';

否则dropEffect默认为null，您将不会获得任何数据。

Answer 4

对我来说很好。您是将其作为HTTP或FILE URL加载吗？我认为它必须是Chrome的HTTP网址。

除非处理dragover，否则HTML5 drop事件不起作用

编辑：

4 个答案: