7

Is there a way to do feature detection for setDragImage of HTML5 Drag and Drop (in JavaScript or Dart)?

I do the general HTML5 Drag and Drop feature detection with the following (from guide to detecting everything):

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

This will return true for Chrome, Firefox, etc., and IE10. It will return false for IE9.

Now, the problem is with IE10: While it supports most of HTML5 Drag and Drop, setDragImage is not supported and I need to provide a polyfill just for setDragImage. But I couldn't figure out a way how to detect this.

4

3 回答 3

7

此解决方案假定已检查一般 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是要走的路。

于 2013-06-03T14:03:31.230 回答
3

您可以使用setDragImage-IE polyfill：

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

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

我注意到，如果您在事件中更改元素的样式（添加一个更改外观的类）dragstart，然后立即在 a 中将其删除setTimeout，Internet Explorer 将制作修改后元素的位图副本并将其用于拖动。所以，这个库实际上做的是实现setDragImage 改变目标元素样式的方法，方法是添加一个类，该类包含您希望在拖动时出现的图像，然后将其删除。这样，浏览器将元素的临时样式显示为拖动图像。

于 2014-07-31T20:17:24.257 回答
2

上一个答案中提到的特征检测在 Opera 12 中失败了——因为它声称支持 setDragImage，所以它不起作用。已链接到的 Dart 库在 Opera 12 中也完全失败，向控制台抛出多个错误。

实际上不可能填充一个幻影图像——即使你创建了一个文档元素并将它放置在正确的位置，你也无法摆脱没有 setDragImage 的默认元素。

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

var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));
于 2013-11-10T20:31:21.497 回答