检测 JavaScript 中的 HTML5 拖放支持

Question

我正在尝试检测 JavaScript 中的 HTML5 拖放支持。 Modernizr 似乎无法处理这个测试用例。

Answer 1

您可以执行以下操作：

if('draggable' in document.createElement('span')) {
  alert("Drag support detected");
}

您可以在此处查看使用上述检查的快速演示测试。

另外，这里有一个很好的功能检测（不是浏览器检测，耶！）列表，维护得相当好以防万一您还在寻找其他 HTML5 功能。

Answer 2

在 document.createElement('span') 中检测“draggable”似乎是个好主意，但实际上行不通。iOS

声称元素中存在draggable，但不允许拖放。（参考：Safari Web 内容指南：处理事件）

IE9 声称元素中没有可拖动功能，但允许拖放（参考：我在 IE 中测试 HTML5 拖放。）

Modernizr 是一个更好的选择，因为它不会混淆 IE。但是，它声明 HTML5 拖放可以在 iOS 上使用。

以下是我检测 HTML5 拖放的方法：

var iOS = !!navigator.userAgent.match('iPhone OS') || !!navigator.userAgent.match('iPad');
if (Modernizr.draganddrop && !iOS) {
    HTML5 drag and drop solution
} else if (Modernizr.draganddrop && iOS) {
    iOS drag and drop solution 
} else {
    non-HTML5 drag and drop solution
}

Answer 3

这就是它在 Modernizr 中的实现方式

function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

Answer 4

使用 Modernizr 中的“isEventSupported”方法检查是否支持“dragstart”和“drop”。请参阅如何检测浏览器支持文件 API 拖放< /a>.