在 javascript 中检测 HTML5 拖放支持

Posted 2023-05-08

【中文标题】在 javascript 中检测 HTML5 拖放支持

【英文标题】：Detecting HTML5 Drag And Drop support in javascript

【发布时间】：2011-02-20 19:49:04

【问题描述】：

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

【参考方案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 功能。

【讨论】：

@gre - 如果这解决了您的问题，请确保通过单击左侧的复选标记来接受答案，未来的答案也是如此:) 如果您仍然遇到任何问题，请发表评论，所以我可以提供更多帮助

这个测试可能曾经是可靠的，但现在看来不再可靠了。链接的 jsFiddle 在 Safari（iPhone 和 iPad ios 8.1.1 上）和 Chrome（android 上的 v39）上检测到拖动支持。

@NickCraver，我可以请你看看这里的拖放相关问题：***.com/questions/54498364/…

【参考方案2】：

在 document.createElement('span') 中检测“可拖动”似乎是个好主意，但实际上它不起作用。

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

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

【讨论】：

我可以谈谈你们 cmets 的 IE 部分。是的，IE9 及更低版本可以通过 dragDrop() 方法支持使用 SPAN 进行拖放（以一种骇人听闻的方式）。请参阅：***.com/questions/5500615/…)。但是，它不支持 HTML5 范围内的拖放。问题是关于 HTML5 级别的支持。

【参考方案3】：

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

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

【参考方案4】：

使用 Modernizr 中的“isEventSupported”方法检查是否支持“dragstart”和“drop”。见How to detect browser support File API drag n drop。