HTML5拖放的setDragImage的特征检测

Question

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

我使用以下内容进行常规HTML5拖放功能检测(从指南到检测所有内容):

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

这将返回trueChrome,Firefox等和IE10.它将返回falseIE9.

现在,问题在于IE10:虽然它支持大多数HTML5拖放,但是setDragImage不支持,我需要提供一个polyfill setDragImage.但我无法弄清楚如何检测这一点.

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

前面的答案中提到的功能检测在 Opera 12 中失败了——因为它声称支持 setDragImage，但它根本不起作用。已链接的 Dart 库在 Opera 12 中也完全失败，向控制台抛出多个错误。

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

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

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