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为dragover事件上的可拖动元素,以便在dropzone上触发事件.

我已经更新了片段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', '');否则dragover将不会调度该事件.