如何检测移动端浏览器drag&drop的实际支持情况？

我明白你的困扰——之前用"ondrop" in document这种方式完全不管用，因为就算浏览器不支持实际的文件拖拽，这些事件属性还是会存在。针对Firefox for Android这种明确不支持拖拽上传的情况，以及Chrome等其他浏览器的兼容，我们可以用功能检测+UA辅助判断的组合方案，比单一方法靠谱得多。

方案一：结合DataTransfer功能检测与UA过滤 #

这个方法先从功能层面判断浏览器是否具备拖拽文件的基础能力，再排除Firefox for Android这类特殊情况：

function supportsFileDragAndDrop() {
  // 先检测DataTransfer是否支持files属性（文件拖拽的核心）
  try {
    const dataTransfer = new DataTransfer();
    const hasFileSupport = 'files' in dataTransfer;
    
    // 排除Android上的Firefox（它不支持文件拖拽上传）
    const isFirefoxAndroid = /Android.*Firefox/i.test(navigator.userAgent);
    
    return hasFileSupport && !isFirefoxAndroid;
  } catch (e) {
    // 某些旧浏览器可能不支持DataTransfer构造函数，直接返回false
    return false;
  }
}

方案二：模拟拖拽事件测试（更贴近实际行为） #

如果不想完全依赖UA检测，可以尝试模拟拖拽事件，看浏览器是否能正常响应：

let supportsDragDrop = false;

function testDragSupport() {
  const testDiv = document.createElement('div');
  
  // 监听dragover事件，能触发说明基础拖拽机制可用
  function handleDragOver(e) {
    e.preventDefault();
    supportsDragDrop = true;
    testDiv.removeEventListener('dragover', handleDragOver);
  }
  
  testDiv.addEventListener('dragover', handleDragOver);
  
  // 触发模拟的拖拽事件
  const dragEvent = new DragEvent('dragover', {
    bubbles: true,
    cancelable: true
  });
  testDiv.dispatchEvent(dragEvent);
  
  // 再针对Firefox for Android做特殊排除
  if (/Android.*Firefox/i.test(navigator.userAgent)) {
    supportsDragDrop = false;
  }
  
  return supportsDragDrop;
}

怎么用？ #

拿到检测结果后，动态生成提示文本就很简单了：

const canDrag = supportsFileDragAndDrop(); // 或者 testDragSupport()
const uploadTip = canDrag ? '点击选择文件或拖拽至此处' : '点击选择文件';

// 把提示插入到页面里，比如：
document.getElementById('upload-hint').textContent = uploadTip;

为什么之前的方法没用？ #

你之前测试的"ondrop" in document只是检测DOM元素是否存在这个事件属性，但属性存在≠浏览器支持实际的文件拖拽功能。很多移动浏览器为了API一致性，会保留这些事件属性，但实际并不处理文件拖拽的逻辑，所以这种检测方式完全失效。

兼容说明 #

• 这个方案完美兼容Chrome（桌面、Chrome OS平板等支持拖拽的场景都会返回true）
• 准确排除Firefox for Android（不管版本，只要是安卓上的Firefox就关闭拖拽提示）
• 旧浏览器会自动返回false，只会显示点击选择的提示

内容的提问来源于stack exchange，提问作者ygoe