javascript - 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 中，当红色方 block 接触到虚线部分时，不会调用 dragover 事件。

我已经尝试复制一些示例，这些示例目前在 chrome 中可以正常工作，但它对我也不起作用。

我已经尝试阻止默认行为以查看它是否有效，但它没有。任何帮助将不胜感激。

谢谢

Answer 1

似乎需要在 dragstart 事件上为可拖动元素设置一些数据，以便在 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这提到了这样的事情:

When a drag occurs, data must be associated with the drag which identifies what is being dragged.

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

还有 event.dataTransfer.setData('text/html', null); 方法，奇怪的是不能像 event.dataTransfer.setData('text/html' , ''); 否则 dragover 事件将不会被调度。