除非处理了拖动，否则 HTML5 放置事件不起作用

Posted 2023-05-08

【中文标题】除非处理了拖动，否则 HTML5 放置事件不起作用

【英文标题】：HTML5 drop event doesn't work unless dragover is handled

【发布时间】：2012-01-14 21:29:53

【问题描述】：

我正在收听drop 事件并执行e.preventDefault() 但它试图打开删除的文件。直到昨天它工作正常。但就在今天，它不知什么原因坏了。我做了一个JsFiddle#bwquR/10 来反映相同的情况。

编辑：

看起来如果你不采取dragover 事件drop 是无法处理的。即使在小提琴中如果您评论 dragover 它将无法正常工作。 在实际工作中我错过了dragover的拼写但它仍然是一个问题drop将无法没有dragover

小提琴实际上在工作，但身体太小了（只有文字DROP在那里）。它只在DROP 文本不在整个身体上的那个小区域进行drop 事件。所以我认为它不起作用。很抱歉造成混乱。

【问题讨论】：

刚遇到这个问题，你的问题帮我解决了。我在 Dragover 事件中返回 false 并开始工作..谢谢！！！

有时定义一些 css body width:300px; height: 300px; border: 1px solid #f1f1f1; 会有所帮助，这样您就可以实际看到放置区域的大小。顺便说一句，很好的例子。

【参考方案1】：

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 方法，例如，仅在拖动链接时。为此，请调用一个检查条件并仅在满足条件时取消事件的函数。如果不满足条件，则不要取消该事件，如果用户松开鼠标按钮，那里也不会发生drop。

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);

【讨论】：

感谢您的详细回答。还有一段您没有引用，但恕我直言，解释原因非常重要：“dragenter 和 dragover 事件的侦听器用于指示有效的放置目标，即可能放置拖动项目的位置。网页或应用程序的大多数区域都不是放置数据的有效位置。因此，这些事件的默认处理是不允许放置。"

【参考方案2】：

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

【讨论】：

天哪，这是一个糟糕的系统设计。感谢您的信息！

@cronoklee 4 年后，我仍然这么说。糟糕的棘手设计

【参考方案3】：

我不确定我是否正确理解了您的问题，但如果您想读取拖放的文件，您需要处理 dragover 事件并至少将这行代码放在那里：

evt.dataTransfer.dropEffect = 'copy';

否则dropEffect默认为null，你不会得到任何数据。

【讨论】：

这是阻止我进入drop() 事件的罪魁祸首。除了我必须使用evt.originalEvent.dataTransfer.dropEffect = "copy"; 来阻止Uncaught TypeError: Cannot set property 'dropEffect' of undefined，而我将文件放在放置区域上。

@iiminov 您必须这样做，因为您使用的是 jQuery。 jQuery 创建一个自定义事件对象并将原始事件对象保留在 originalEvent 属性下。

【参考方案4】：

对我来说很好用。您是将其加载为 HTTP 还是 FILE URL？我认为它需要是 Chrome 的 HTTP URL。

【讨论】：

作为 HTTP 本地主机。直到昨天它工作得很好。我不明白发生了什么。

JsFiddle 在 Chrome 中按预期工作。一旦文件超过 DROP，我就会收到 DragOver 消息。当我评论该警报时，我可以删除它并收到 Dropped 消息。

它也对我有用。但是在写DROP的区域。不在全身。所以我认为它不起作用。对不起。但是我已经编辑了我的问题。对不起