javascript如何实现拖放功能_需要哪些事件【教程】_技术教程

dragstart 必须调用 dataTransfer.setData()，否则 dragover 和 drop 不触发；dragover 必须 preventDefault() 才允许投放；drop 中需手动 getData() 处理数据；移动端原生 drag/drop 不支持，需用 touch 或专用库替代。

dragstart 事件必须设置 dataTransfer

没有 dataTransfer.setData()，后续的 dragover 和 drop 就不会触发——这是最常被忽略的卡点。浏览器默认会阻止 drop，而阻止的前提是“没看到合法拖拽数据”。

实操建议：

dragstart 回调里必须调用 e.dataTransfer.setData('text/plain', 'some-id')（类型字符串不能乱写，'text/plain' 最稳妥）
如果拖的是元素，推荐用自定义类型如 'application/my-item'，再配合 e.dataTransfer.effectAllowed = 'move' 明确意图
不要只设空字符串或 null，部分浏览器（如 Safari）会直接跳过整个拖放流程

dragover 事件必须阻止默认行为

dragover 默认不放行 drop，哪怕你写了 drop 监听也没用。它的唯一作用

就是“告诉浏览器：这里允许投放”，而这个许可必须靠 e.preventDefault() 显式声明。

常见错误现象：

光标始终显示“禁止”图标（圆圈斜杠）
drop 事件完全不触发，控制台也无报错
仅在 Chrome 中工作，Firefox/Safari 失效（因各浏览器对未 preventDefault 的 dragover 处理更严格）

实操建议：

监听 dragover 时，第一行就写 e.preventDefault()
可选加 e.dataTransfer.dropEffect = 'move' 来同步光标样式（但不是必须）
别只在目标容器上监听——如果容器有内层子元素，需确保事件能到达或委托到容器本身

drop 事件里要主动取 dataTransfer 数据

drop 触发后，e.dataTransfer 里的数据不会自动还原或映射到 DOM；你得手动 getData()，再决定怎么插入、移动或更新节点。

使用场景与注意事项：

若拖的是文本，用 e.dataTransfer.getData('text/plain') 取值
若拖的是自定义元素，建议用 e.dataTransfer.getData('application/my-item') 并解析 ID 或 JSON 字符串
注意：Safari 对非 'text/*' 类型的 getData() 支持不稳定，生产环境建议 fallback 到 'text/plain' 存序列化数据
drop 后记得补一句 e.preventDefault()（虽然多数情况已不必要，但防兼容性问题）