Question

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

Answer 1

你可以这样做：

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

You can see a quick demo test using the above check here

此外，there's a nice feature detection (not browser detection, yay!) list that's fairly well maintained here以防您正在寻找其他HTML5功能。

Answer 2

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

iOS声称draggable在元素中，但不允许拖放。（参考：Safari Web Content Guide: Handling Events）

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”。请参阅How to detect browser support File API drag n drop。

在javascript中检测HTML5拖放支持

4 个答案: