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

我已更新了现在在Chrome中使用的代码段http://jsfiddle.net/G9mJw/20/。

和新代码如下：

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事件。

Answer 2

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

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

Answer 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）

HTML5拖放ondragover未在Chrome中触发

3 个答案: