在JavaScript中检测HTML5拖放支持

Question

我正在尝试用JavaScript检测HTML5拖放支持。现代浏览器好像不能处理这个测试案例。

- gre

---

对于那些在2022年仍然遇到这个问题的人：Modernizr在2015年删除了此检测。以下是更改日志中的说明：>2015年9月11日：出于某些原因#1585，删除draganddrop检测。 - BurninLeo

Answer 1

你可以这样做：

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

你可以在这里查看一个使用上述检查的快速演示测试。

另外，这里有一个不错的特性检测列表（而非浏览器检测），并且还相当维护良好，如果你正在寻找其他HTML5功能也可以在这里找到。

- Nick Craver

---

@gre - 如果这解决了您的问题，请确保通过单击左侧的复选标记接受答案，对于未来的答案也是如此 :) 如果您仍然遇到任何问题，请评论以便我可以进一步帮助。 - Nick Craver

这个测试可能曾经是可靠的，但现在似乎不再可靠了。链接的 jsFiddle 可以检测 Safari（iPhone 和 iPad iOS 8.1.1）和 Chrome（Android 上的 v39）上的拖动支持。 - James

@NickCraver，可以请您看一下这里关于拖放相关的问题吗：https://dev59.com/MbHma4cB1Zd3GeqPNpII - Istiaque Ahmed

Answer 2

检测在document.createElement('span')中是否有"draggable"属性看起来是个好主意，但实际上并不起作用。

iOS声称元素中有draggable属性，但不允许拖放。(参考：Safari Web内容指南：处理事件)

IE9声称元素中没有draggable属性，但确实允许拖放。(参考：我在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
}

- Jennifer

---

我可以谈谈您评论中的IE部分。是的，IE9及以下版本可以通过dragDrop()方法以hacky方式支持SPANs的拖放。请参见：https://dev59.com/wm035IYBdhLWcg3wTuJu)。但是，它不支持HTML5的拖放到这个程度。而问题是关于HTML5级别的支持。 - Phil

Answer 3

这就是 Modernizr 的实现方式

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

- Brankodd

Answer 4

使用Modernizr中的“isEventSupported”方法检查是否支持“dragstart”和“drop”。请参见如何检测浏览器支持File API拖放。

- Peter Tseng