javascript - HTML5拖放ondragover在Chrome中不触发

我这里有一个简单的示例，它对我来说不是在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中有效，但对我也不起作用。

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

谢谢

最佳答案

似乎需要为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', '');的空字符串，否则将不会分派(dispatch)dragover事件。

关于javascript - HTML5拖放ondragover在Chrome中不触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6481094/