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 中工作的例子，但它对我也不起作用。

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

谢谢

4

3 回答 3

12

似乎需要为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事件将不会被调度。

于 2011-06-26T09:38:33.477 回答
4

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

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

于 2012-02-16T00:01:45.027 回答
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)

于 2014-06-27T14:04:40.863 回答