在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);
}