JavaScript拖放功能基于原生Drag and Drop API，需设draggable="true"并按序处理dragstart、dragenter、dragover、drop等7个事件，且关键步骤须调用preventDefault。
JavaScript 中的拖放功能主要依靠原生 Drag and Drop API 实现，不需要第三方库。它基于事件驱动，核心是让元素可拖、监听拖拽过程、定义投放区域并处理结果。
让元素支持拖拽（draggable 属性）
默认只有图片、链接、选中文本等能拖。要让任意元素（比如 div、button）可拖，必须设置 draggable="true"：
- HTML 中直接写：拖我
- JS 动态设置：element.draggable = true
- 注意：仅设 draggable 不会自动触发拖放，还需监听事件并阻止默认行为（如文本选中、链接跳转）
关键拖放事件和典型流程
一次完整拖放包含 7 个常用事件，按顺序大致为：
- dragstart：鼠标按下并开始拖动时触发 —— 在这里可设置拖拽数据（e.dataTransfer.setData('text/plain', 'hello')）和视觉反馈（如修改 opacity）
- drag：拖动过程中持续触发（较少用）
- dragenter：被拖元素进入目标区域时触发 —— 必须调用 e.preventDefault() 才允许后续 drop
- dragover：在目标区域上持续移动时触发 —— 同样需 e.preventDefault()（否则 drop 不会触发）
- dragleave：离开目标区域时触发
- drop：在目标区域松开鼠标时触发 —— 可用 e.dataTransfer.getData('text/plain') 获取数据
- dragend：拖拽结束（无论是否成功投放）时触发
常见坑点与实用建议
拖放看似简单，但几个细节容易出错：
立即学习“Java免费学习笔记（深入）”；
- 目标元素必须监听 dragenter 和 dragover，且都调用 e.preventDefault()，否则 drop 事件不会触发
- dataTransfer 只支持字符串类型（如 'text/plain'、'text/html'、'application/json'），传对象需先 JSON.stringify
- 跨浏览器兼容性良好（Chrome/Firefox/Safari/Edge 均支持），但移动端不支持原生 Drag API，需用 touch 事件模拟或借助库（如 interact.js）
- 视觉反馈很重要：可在 dragenter 时加高亮边框，dragleave 时移除，drop 后重置状态
一个最小可用示例
把文字从左边拖到右边：
- 左侧 div：Hello
- 右侧 div：拖到这里
- JS 绑定：source.ondragstart = e => e.dataTransfer.setData('text', e.target.innerText)
- target 监听：target.ondragover = target.ondragenter = e => e.preventDefault()
- target 接收：target.ondrop = e => { e.preventDefault(); e.target.innerText = e.dataTransfer.getData('text') }
基本上就这些。拖放逻辑不复杂，但事件链条和 preventDefault 的时机容易忽略，多试几次就能理顺。
