Question

有没有办法对HTML5拖放的 setDragImage 进行功能检测（在JavaScript或Dart中）？

我使用以下（来自guide to detecting everything）进行常规HTML5拖放功能检测：

return 'draggable' in document.createElement('span');

这将为Chrome，Firefox等和IE10返回true。对于IE9，它将返回false。

现在，问题在于 IE10 ：虽然它支持HTML5拖放的大部分内容，但不支持setDragImage，我需要为setDragImage提供一个polyfill 。但我无法弄清楚如何检测这一点。

Answer 1

此解决方案假设已经检查了一般的D＆amp; D支持。

JavaScript（在IE，Firefox，Opera和Chrome中测试）：

function test() {
    var testVar = window.DataTransfer || window.Clipboard;  // Clipboard is for Chrome
    if("setDragImage" in testVar.prototype) {
        window.alert("supported");
    } else {
        window.alert("not supported");
    }
}

落镖：

我没有找到使用“原生”Dart代码执行此操作的方法，因此js-interop是可行的方法。

Answer 2

您可以使用 setDragImage-IE polyfill：

https://github.com/MihaiValentin/setDragImage-IE

这是它的实际工作方式（来自README）：

我注意到如果你改变元素的样式（添加一个在dragstart事件中然后改变外观的类在setTimeout中立即删除它，Internet Explorer将会修改后的元素的位图副本，并将其用于拖动。那么，这个库实际上做的是实现setDragImage 通过添加类来更改目标元素样式的方法包括拖动时要显示的图像，然后删除它。这样，浏览器就会显示临时样式该元素作为拖动图像。

Answer 3

上一个答案中提到的功能检测在Opera 12中失败了 - 因为它声称支持setDragImage，它只是不起作用。已链接到的Dart库也完全在Opera 12中失败，将多个错误抛给控制台。

实际上不可能填充鬼图像 - 即使您创建了一个文档元素并将其放置在正确的位置，如果没有setDragImage，也无法摆脱默认图像。

我所知道的唯一解决方案是过滤掉Opera 12和IE的所有版本（包括IE11），并将它们视为旧版浏览器，这些浏览器必须通过传统的鼠标事件脚本来满足。由于直接功能测试失败，我建议进行间接对象测试（即使用对象测试来检测那些特定的浏览器）：

var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));

HTML5拖放的setDragImage的特征检测

3 个答案: