HTML5拖放的setDragImage的特征检测

Question

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

我使用以下（来自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&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

这就是它的实际工作方式（来自自述文件）：

我注意到，如果您更改元素的样式（添加 更改外观的类）在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));