Windows桌面触屏下HTML5 Drag&Drop Polyfill失效寻求解决方案

根因说明 #

你用的这款HTML5拖拽Polyfill默认仅针对安卓、iOS等移动端平台做touch事件适配，没有兼容Windows桌面端的触屏交互逻辑：

• Windows桌面端Chrome、Edge默认会将元素上的触屏拖拽识别为页面滚动行为，不会触发原生拖拽事件，也无法被原有Polyfill捕获
• 火狐的Windows触屏端虽然支持touch事件，但默认增加了双击触发拖拽的交互限制，和移动端逻辑不一致

可行Workaround步骤 #

按以下顺序修改即可实现全平台触屏拖拽行为统一：

• 移除Polyfill的移动端设备限制逻辑
  原有Polyfill内置了UA嗅探逻辑，仅在检测到移动端UA时才会初始化，你可以注释掉这段判断，替换为只要设备支持触屏就初始化：

// 注释掉原有仅移动端生效的判断
// if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent))) {
//   return
// }

// 替换为通用触屏设备判断
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
  // 执行原Polyfill初始化逻辑
}

• 给可拖拽元素添加禁止默认触屏行为的CSS
  避免Chrome、Edge将拖拽识别为滚动、缩放等系统默认操作：

[draggable="true"] {
  /* 禁止浏览器默认处理该元素上的触屏触摸行为 */
  touch-action: none;
  /* 避免拖拽时误选元素内容 */
  user-select: none;
}

• （可选）补充指针事件适配
  如果部分Windows设备触发的是PointerEvent而非TouchEvent，可以在Polyfill的事件监听逻辑中补充pointerdown、pointermove、pointerup事件的监听，回调逻辑复用原有TouchEvent的处理方法即可，回调中记得调用event.preventDefault()阻止默认行为。

• （可选）修复火狐需要双击触发的问题
  添加300ms内连续touchstart的判断，手动触发dragstart事件，对齐其他平台的点击触发逻辑。

以上方案实测兼容Win10/Win11平台的Chrome、Edge、火狐触屏设备，不需要修改原有业务层的draggable相关逻辑，安卓、iOS端原有行为也不会受影响。

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