拖拽跨浏览器可靠需三要素：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 属性；而且只允许对 <img alt="javascript如何实现拖拽功能_有哪些需要注意的浏览器兼容性问题" >、<a></a> 和带 draggable="true" 的元素启用拖拽。
立即学习“Java免费学习笔记（深入）”；
- 动态插入的元素（如 JS 创建的
div）必须显式加属性：el.setAttribute('draggable', 'true') - IE11 不支持
dataTransfer.setDragImage()，自定义拖拽图标无效，只能用系统默认（小缩略图或光标旁文字） -
dropEffect和effectAllowed在 IE11 中行为不一致，建议统一设为'move'并忽略返回值校验
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');
// 处理放置逻辑
});
拖拽看似简单，但跨浏览器真正可靠的行为，往往卡在 dataTransfer 的初始化时机、preventDefault 的调用位置，以及移动端彻底换套方案这三个点上。漏掉任一，就可能在某个浏览器里“看起来能拖，但就是放不进去”。 
