在javascript中检测HTML5拖放支持

Question

我正试图在JavaScript中检测HTML5拖放支持。 Modernizr似乎没有处理这个测试用例。

Answer 1

你可以这样做：

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

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

此外， 有一个很好的功能检测（不是浏览器检测，yay！）列表，如果你正在寻找其他HTML5功能， 这里很好地维护 。

Answer 2

检测document.createElement（'span'）中的“draggable”似乎是一个好主意，但在实践中它不起作用。

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

IE9声称draggable不在元素中，但允许拖放。 （参考：我在IE中测试HTML5拖放。）

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

以下是我检测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拖放 。