Javascript 除非处理拖放，否则 HTML5 放置事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8414154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 drop event doesn't work unless dragover is handled
提问by Neel Basu
I am listening to the dropevent and doing e.preventDefault()But its trying to open the dropped file. It was working fine till yesterday. But just today It broke for some unknown reason. I made a JsFiddle#bwquR/10to reflect the Same.
我正在收听该drop事件并正在执行e.preventDefault()但它试图打开丢弃的文件。直到昨天它都运行良好。但就在今天，它因某种未知原因而破裂。我做了一个JsFiddle#bwquR/10来反映相同。
Edit:
编辑：
It looks like if you don't take the dragoverevent dropcannot be handled. even in the the fiddle If you comment the dragoverIt will not work.
In the actual work I missed the spelling of dragoverBut its still a question dropwill not work without dragover
看起来如果你不采取dragover事件drop就无法处理。即使在小提琴中如果你评论dragover它也行不通。
在实际工作中，我错过了拼写dragover但它仍然是一个问题，drop没有dragover
The fiddle was actually working but s the body was so small (only text DROPthere). It was taking dropevent only on that small area where DROPtext lies not on the entire body. So I thought It was not working. Sorry for the confusion.
小提琴实际上在工作，但身体太小了（DROP那里只有文字）。它只drop在DROP文本不在整个身体上的那个小区域发生事件。所以我认为它不起作用。对困惑感到抱歉。
回答by zuo
I guess it is because that without dragOver event handler, default event handler of dragOver event is used, thus, no drop event is triggered after that. There is a need with e.preventDefaultfor dragOver event before drop event.
我猜是因为没有dragOver事件处理程序，使用dragOver事件的默认事件处理程序，因此之后不会触发drop事件。e.preventDefault在放置事件之前需要使用dragOver 事件。
回答by Mike Lee
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations
If you want to allow a drop, you must prevent the default handling by cancelling the event. You can do this either by returning false from an attribute-defined event listener, or by calling the event's event.preventDefault method. The latter may be more feasible in a function defined in a separate script.
如果要允许删除，则必须通过取消事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回 false 或调用事件的 event.preventDefault 方法来执行此操作。在单独脚本中定义的函数中，后者可能更可行。
<div ondragover="return false">
<div ondragover="event.preventDefault()">
Calling the preventDefault method during both a dragenter and dragover event will indicate that a drop is allowed at that location. However, you will commonly wish to call the preventDefault method only in certain situations, for example, only if a link is being dragged. To do this, call a function which checks a condition and only cancels the event when the condition is met. If the condition is not met, don't cancel the event, and a drop will not occur there if the user releases the mouse button.
在 dragenter 和 dragover 事件期间调用 preventDefault 方法将指示在该位置允许放置。但是，您通常希望仅在某些情况下调用 preventDefault 方法，例如，仅当链接被拖动时。为此，请调用检查条件并仅在满足条件时取消事件的函数。如果不满足条件，则不要取消该事件，如果用户释放鼠标按钮，则不会发生放置。
https://developer.mozilla.org/en-US/docs/Web/Events/dragover
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);
回答by mnowotka
I'm not sure if I understand your problem correctly but if you want to read dropped files you need to handle dragover event and put there at least this line of code:
我不确定我是否正确理解了您的问题，但是如果您想读取放置的文件，则需要处理拖放事件并至少放置以下代码行：
evt.dataTransfer.dropEffect = 'copy';
otherwise dropEffect is null by default and you won't get any data.
否则 dropEffect 默认为 null，您将不会获得任何数据。
回答by Maurice
Works fine for me. Are you loading this as an HTTP or a FILE URL? I believe it needs to be an HTTP URL with Chrome.
对我来说很好用。您是将其作为 HTTP 还是 FILE URL 加载？我相信它需要是 Chrome 的 HTTP URL。
