Javascript HTML5 拖放 ondragover 未在 Chrome 中触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6481094/
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 Drag and Drop ondragover not firing in Chrome
提问by zanona
I have this simple example here which is not firing in Chrome 11 for me http://jsfiddle.net/G9mJw/which consists on a very simple code:
我在这里有一个简单的例子，它不会在 Chrome 11 中为我触发http://jsfiddle.net/G9mJw/它包含一个非常简单的代码：
var dropzone = document.getElementById('dropzone'),
draggable = document.getElementById('draggable');
function onDragOver(event) {
var counter = document.getElementById('counter');
counter.innerText = parseInt(counter.innerText, 10) + 1;
}
dropzone.addEventListener('dragover', onDragOver, false);
It seems to work fine in safari tho...but in Chrome the dragoverevent is not being called when the red square touch the dotted one.
它似乎在 safari 中运行良好...但在 Chrome 中，dragover当红色方块接触到虚线时，事件不会被调用。
I've tried to replicate some examples which have this currently working in chrome but it din't work for me either.
我试图复制一些当前在 chrome 中工作的例子，但它对我也不起作用。
I've tried prevent the default behaviour to see it if worked but it didn't. any help would be very appreciated.
我试过阻止默认行为来查看它是否有效，但它没有。任何帮助将不胜感激。
thanks
谢谢
回答by zanona
It seems that it is needed to set some data to the draggable element on the dragstartevent for the dragoverevent to be fired on the dropzone.
似乎需要为dragstart事件上的可拖动元素设置一些数据，以便在放置区上dragover触发事件。
I've updated the snippet http://jsfiddle.net/G9mJw/20/which now works in chrome as well.
我已经更新了代码段http://jsfiddle.net/G9mJw/20/，它现在也适用于 chrome。
and the new code as follows:
和新代码如下：
var dropzone = document.getElementById('dropzone'),
draggable = document.getElementById('draggable');
function onDragStart(event) {
event.dataTransfer.setData('text/html', null); //cannot be empty string
}
function onDragOver(event) {
var counter = document.getElementById('counter');
counter.innerText = parseInt(counter.innerText, 10) + 1;
}
draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);
Also there's some more information about how this works at: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Dataand this mention things like:
还有一些关于它是如何工作的更多信息：https: //developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data并且提到了以下内容：
When a drag occurs, data must be associated with the drag which identifies what is being dragged.
当拖动发生时，数据必须与标识被拖动的内容相关联。
Which make easier to understand... I am just trying to figure out how does this works in Safari without the need to send some data? or perhaps it already send some content as default?
哪个更容易理解......我只是想弄清楚这在Safari中是如何工作的，而无需发送一些数据？或者它可能已经默认发送了一些内容？
Also the event.dataTransfer.setData('text/html', null);method, curiously cannot send an empty string like event.dataTransfer.setData('text/html', '');otherwise the dragoverevent will not be dispatched.
还有这个event.dataTransfer.setData('text/html', null);方法，奇怪的是不能发送空字符串，event.dataTransfer.setData('text/html', '');否则dragover事件将不会被调度。
回答by natevw
Chrome currently only supports a few data types —?if your data does not have a recognized MIME Type the drag/drop simply doesn't proceed. This is very clearly in violation of the W3C Spec, and is not a problem in Firefox (so long as you provide somesort of data) or even Safari (which allows the drag to proceed whether data is set or not).
Chrome 当前仅支持几种数据类型——如果您的数据没有可识别的 MIME 类型，则拖/放根本不会进行。这是很清楚违反了W3C规范，而不是在Firefox的问题（只要你提供一些类型的数据），甚至Safari浏览器（它允许拖动进行数据是否设置与否）。
The Chromium bug report is here: http://code.google.com/p/chromium/issues/detail?id=93514
Chromium 错误报告在这里：http: //code.google.com/p/chromium/issues/detail?id=93514
回答by Anthony Scaife
I had trouble with mime types.
我在 mime 类型方面遇到了麻烦。
W3Schools has a page you can experiment with: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
W3Schools 有一个您可以尝试的页面：http: //www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
Their code sample would not work for me until I changed getData and setData to "text/html" instead of "Text".
他们的代码示例对我不起作用，直到我将 getData 和 setData 更改为“text/html”而不是“Text”。
I am using: Version 34.0.1847.116 Ubuntu 14.04 aura (260972)
我正在使用：版本 34.0.1847.116 Ubuntu 14.04 aura (260972)
