HTML5 拖放 ondragover 未在 Chrome 中触发答案

【问题标题】：HTML5 Drag and Drop ondragover not firing in ChromeHTML5 拖放 ondragover 未在 Chrome 中触发
【发布时间】：2011-06-25 23:16:49
【问题描述】：

我在这里有一个简单的示例，它不会在 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 中可以使用，但对我也不起作用。

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

谢谢

【问题讨论】：

它适用于我的 Chrome 12（最新发布）。可能11还不支持？
很奇怪，我刚刚尝试使用 12.0.742.100 并且它仍然无法正常工作......计数器不会为每个触发的事件添加 1......这意味着没有被触发。而且更奇怪的是，html5demos.com/drag 即使在 11 日也可以正常工作。

标签： javascript events drag-and-drop event-dispatching

【解决方案1】：

似乎需要在 dragstart 事件上为可拖动元素设置一些数据，以便在 dropzone 上触发 dragover 事件。

我已经更新了 sn-p 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 事件将不会被调度。

【讨论】：

一个有趣的附录，如果你碰巧使用 jQuery，至少对我来说，传递给我的拖动函数的事件对象似乎不包含 dataTransfer 对象。我必须从 $('.foo').live('dragstart',...) 切换到 elem.addEventListener('dragstart',...) 才能使我的活动正常进行
如果拖动对象甚至不是来自您的浏览器怎么办？（即：从另一个浏览器代替？）
@Endophage 如果您使用的是 jQuery，您实际上可以使用 jQuery.event.props.push("dataTransfer"); 将 dataTransfer 对象添加到事件对象（请参阅 api.jquery.com/category/events/event-object 上的“其他属性”）
@Ben 非常有用。他们确实警告说，它会增加所有事件的开销，因此值得考虑与其他事件相比，您的 UI 有多少使用拖放，然后才深入并添加它。
这个小提琴似乎与某些版本的 jQuery 不兼容

【解决方案2】：

Chrome 目前仅支持几种数据类型 - 如果您的数据没有可识别的 MIME 类型，则拖放操作将无法继续。这显然违反了 W3C 规范，并且在 Firefox（只要您提供 some 类型的数据）甚至 Safari（无论是否设置数据都允许拖动继续进行）都不是问题与否）。

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

【讨论】：

"text/html" 应该没问题，不是吗？它也不适合我。请参阅我的评论以由 zanona 回答。
他们似乎已经修复了它，如果我编辑从该票 (jsfiddle.net/pimvdb/HU6Mk/10) 链接的 JSFiddle 并重新运行它，Chrome 确实允许拖动“text/html”和其他内容类型现在。

【解决方案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 aura (260972)

【讨论】：