HTML5拖放的setDragImage特征检测

Feature Detection for setDragImage of HTML5 Drag and Drop

本文关键字：特征检测 setDragImage 拖放 HTML5      更新时间：2023-09-26

是否有一种方法可以对setDragImage的HTML5拖放(JavaScript或Dart)进行特征检测?

我做一般的HTML5拖放功能检测与以下(从指南到检测一切):

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

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

现在，问题在于IE10:虽然它支持大多数HTML5拖放，但不支持setDragImage，我需要为setDragImage提供一个填充。但是我不知道怎么检测这个

此解决方案假设已经检查了一般的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:

我没有找到一种方法可以用"本地"Dart代码做到这一点，所以js-interop是一种方法。

可以使用setDragImage-IE polyfill:

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

这是它的实际工作方式(来自README):

我注意到，如果你改变元素的样式(添加一个类(更改外观)在dragstart事件中，然后在setTimeout中立即删除它，Internet Explorer将使已修改元素的位图副本，并将使用它进行拖动。这个库实际做的是实现setDragImage方法，该方法通过添加类来更改目标元素的样式包含您希望在拖动时显示的图像，然后删除它。的临时样式元素作为拖放图像。

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

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

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

var hasNativeDraggable = (element.draggable && !(document.uniqueID || window.opera));
相关文章：