Javascript HTML5拖放ondragover不在Chrome中启动

我这里有一个简单的示例，它不是在Chrome 11中为我启动的，它包含一个非常简单的代码：

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

它在safari tho中似乎运行良好……但在Chrome中，当红色方块触碰虚线方块时，

dragover

事件不会被调用

我试着复制一些目前在chrome上运行的例子，但对我来说也不起作用

我试图阻止默认行为，看看它是否有效，但没有。任何帮助都将不胜感激

---

感谢似乎需要在

dragstart

事件上为Dragable元素设置一些数据，以便在dropzone上触发

dragover

事件

我已经更新了这个代码段，它现在也可以在chrome中使用

新守则如下：

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

此外，还有一些关于如何在以下位置工作的更多信息： 这里提到的是：

当发生拖动时，数据必须与标识拖动内容的拖动相关联

这样更容易理解。。。 我只是想弄清楚这在Safari中是如何工作的，而不需要发送一些数据？或者它已经默认发送了一些内容

---

还有

event.dataTransfer.setData（'text/html'，null）method不能发送像
event.dataTransfer.setData（'text/html'，''）这样的空字符串
否则将不会调度
dragover
事件。
Chrome当前仅支持少数数据类型-如果您的数据没有可识别的MIME类型，则无法继续拖放。这显然违反了W3C规范，在Firefox（只要您提供某种数据）甚至Safari（无论是否设置数据，都允许拖动）中都不是问题

Chromium bug报告如下：
我在mime类型方面遇到了问题

W3Schools有一个页面，您可以尝试：

在我将getData和setData更改为“text/html”而不是“text”之前，他们的代码示例对我来说不起作用

我正在使用：
版本34.0.1847.116 Ubuntu 14.04 aura（260972）
它在Chrome 12（最新发布）中为我工作。也许11还不支持它？奇怪的是，我只是尝试了12.0.742.100，但它仍然不工作…计数器没有为每个激发的事件添加1…这意味着没有被激发。更奇怪的是，它甚至可以在11上正常工作。一个有趣的附录，如果您碰巧使用jQuery，至少对我来说，传递给我的拖动函数的事件对象似乎不包含dataTransfer对象。我必须从
$（'.foo'）.live（'dragstart'，…）
切换到
elem.addEventListener（'dragstart'，…）
，才能使我的事件正常工作如果拖动对象甚至不是来自您的浏览器呢？（即：改为从另一个浏览器？@Endophage如果使用jQuery，实际上可以使用
jQuery.event.props.push（“数据传输”）将数据传输对象添加到事件对象中（请参阅上的“其他属性”）@Ben非常有用。他们警告说，这会增加所有事件的开销，因此在深入并添加之前，值得考虑与其他事件相比，您的UI使用了多少拖放操作。此提琴似乎与jQuery“text/html”的某些版本不兼容，应该可以，不是吗？这对我来说也不管用。查看我的评论，zanona回答。他们似乎已经修复了它，如果我编辑从该票据（）链接的JSFIDLE并重新运行它，Chrome现在确实允许拖动“text/html”和其他内容类型。