HTML5拖放ondragover未在Chrome中触发

Question

我在这里有一个简单的例子，它不是在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);

它似乎在safari中工作得很好......但是在Chrome中，当红色方块触摸虚线时，不会调用dragover事件。

我试图复制一些目前正在使用chrome的示例，但它对我来说也不起作用。

我已经尝试阻止默认行为，如果工作但看不到它。 任何帮助将非常感激。

谢谢

Answer 1

似乎需要将一些数据设置为dragstart事件中的draggable元素，以便在dropzone上触发dragover事件。

我已经更新了片段http://jsfiddle.net/G9mJw/20/ ，它现在也适用于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);

还有一些关于它如何工作的更多信息： https ： //developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data ，这提到的事情如下：

发生拖动时，数据必须与拖动相关联，该拖动标识正在拖动的内容。

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

还有event.dataTransfer.setData('text/html', null); 方法，奇怪的是不能发送像event.dataTransfer.setData('text/html', '');这样的空字符串event.dataTransfer.setData('text/html', ''); 否则将不会发送dragover事件。

Answer 2

Chrome目前仅支持一些数据类型 - 如果您的数据没有可识别的MIME类型，则拖放操作就不会继续。 这是很清楚违反了W3C规范，而不是在Firefox的问题（只要你提供某种形式的数据），甚至Safari浏览器（它允许拖动进行数据是否设置与否）。

Chromium错误报告位于： http ： //code.google.com/p/chromium/issues/detail？id = 93514

Answer 3

我遇到了mime类型的问题。

W3Schools有一个你可以试验的页面： http ： //www.w3schools.com/html/tryit.asp？ filename = tryhtml5_draganddrop2

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

我正在使用：版本34.0.1847.116 Ubuntu 14.04光环（260972）