HTML5拖放在Chrome浏览器中ondragover事件无法触发

Question

HTML5拖放在Chrome浏览器中ondragover事件无法触发

javascripteventsdrag-and-dropevent-dispatching

10

我在这里有一个简单的例子，在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中可以工作的示例，但也没有成功。

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

谢谢

- zanona

它在我使用的Chrome 12（最新版本）中有效。也许11还不支持它？ - Halcyon

很奇怪，我刚刚尝试了12.0.742.100版本，但它仍然无法工作...计数器没有为每个事件触发添加1...这意味着它没有被触发。更奇怪的是，即使在11上，http://html5demos.com/drag也可以正常工作。 - zanona

3个回答

4

目前，Chrome仅支持少量的数据类型 - 如果您的数据没有被识别为MIME类型，则拖放操作将无法进行。这明显违反了W3C规范，在Firefox中不存在此问题（只要提供某种数据），甚至在Safari中也没有问题（即使未设置数据，也允许进行拖放）。

Chromium的错误报告在这里：http://code.google.com/p/chromium/issues/detail?id=93514

- natevw

"text/html"可以吗？我用那个也不行。请看我对zanona回答的评论。 - molecular

他们似乎已经修复了它，如果我编辑从那个票链接的JSFiddle（http://jsfiddle.net/pimvdb/HU6Mk/10/）并重新运行它，Chrome现在确实允许拖动“text/html”和其他内容类型。 - natevw

0

我在处理MIME类型时遇到了问题。

W3Schools有一个页面可以供您进行实验： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

他们的代码示例在我更改getData和setData为"text/html"而不是"Text"之前无法正常工作。

我正在使用：版本34.0.1847.116 Ubuntu 14.04 aura (260972)

- Anthony Scaife

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zanona · Accepted Answer

在拖动元素的 dragstart 事件中设置一些数据，似乎需要才能触发放置区域上的 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', '');那样发送空字符串，否则将不会触发dragover事件。