JavaScript拖拽实现与兼容性解析

一分耕耘，一分收获！既然都打开这篇《JavaScript实现拖拽功能及兼容性注意事项》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

拖拽跨浏览器可靠需三要素：dragstart中必须调用setData('text/plain', '')初始化dataTransfer；dragover和drop事件均需preventDefault()允许放置；移动端须用touch事件模拟而非原生API。

dragstart 事件里必须设置 dataTransfer，否则拖拽会失败

Chrome、Firefox、Edge 都要求在 dragstart 中至少调用一次 setData()，哪怕只是设个空字符串。不设的话，整个拖拽流程会在鼠标抬起后中断，甚至不触发 dragover 和 drop。

• event.dataTransfer.setData('text/plain', '') 是最轻量的保底写法
• 如果想传自定义数据（比如元素 ID），用 setData('text/id', 'item-123')，接收端再用 getData('text/id')
• Safari 对 setData 的 MIME 类型更敏感，避免用 'application/json' 这类非标准类型，优先选 'text/plain' 或 'text/uri-list'

drop 事件默认被浏览器阻止，必须显式调用 preventDefault()

几乎所有现代浏览器（包括 Safari 15+）在 dragover 和 drop 阶段都会默认阻止放置行为——这不是 bug，是安全策略。没调 preventDefault()，drop 就永远不会触发。

• 只在 dragover 里调不够，drop 里也得再调一次 event.preventDefault()
• 别在 dragenter 里调 preventDefault()，它对是否允许 drop 没影响，反而可能干扰滚动行为
• Firefox 在某些嵌套容器场景下，如果父容器没监听 dragover 并阻止，默认会把 drop 当作“打开文件”处理（尤其拖本地文件时）

移动端没有原生 drag/drop 事件，得用 touchstart + touchmove 模拟

iOS Safari 和 Android Chrome 均不支持标准拖拽 API。所谓“兼容”，其实是绕过它，用触摸事件手动实现位移和状态管理。

• 监听 touchstart 记录初始位置和目标元素，touchmove 计算偏移并更新 transform: translate()
• 别依赖 event.target 在 touchmove 中的稳定性——手指移动中 target 可能因 DOM 重排突变，改用起始时缓存的元素引用
• 需要手动处理 touchend 后的“释放”逻辑：判断是否落在有效区域、触发类似 drop 的业务回调
• 第三方库如 interact.js 或 sortablejs（开启 forceFallback: true）能省掉大部分适配细节

IE11 要求 draggable="true" 属性且仅支持部分元素

IE11 是最后一个还用旧版拖拽模型的主流浏览器。它不认 element.draggable = true 的 JS 设置，必须写 HTML 属性；而且只允许对 、 和带 draggable="true" 的元素启用拖拽。

document.addEventListener('dragstart', (e) => {
  // 所有浏览器都需这行，包括 Safari 和 Firefox
  e.dataTransfer.setData('text/plain', '');
  // IE11 不支持 setData 以外的 MIME 类型，别写 'application/x-item'
});

document.addEventListener('dragover', (e) => {
  e.preventDefault(); // 允许 drop 的关键
});

document.addEventListener('drop', (e) => {
  e.preventDefault(); // 必须再防一次
  const id = e.dataTransfer.getData('text/plain');
  // 处理放置逻辑
});