JavaScript拖放功能依赖原生Drag and Drop API，需设draggable="true"，关键事件包括dragstart、dragover（须preventDefault）、drop等，dataTransfer用于传数据，注意兼容性及移动端不支持。
JavaScript 中实现拖放功能主要依靠原生的 Drag and Drop API，它提供了一套语义清晰的事件和方法，让元素可拖、可投、可反馈。核心不依赖第三方库，但需注意浏览器兼容性和一些关键细节（比如必须设置 draggable="true"，且部分事件需阻止默认行为才能生效）。
必需的 HTML 属性与基础准备
要让一个元素可拖动，第一步是显式声明：拖我
注意：draggable 默认对图片、链接等少数元素为 true，其他元素（如 div、span）必须手动设为 true，否则无法触发拖放事件。
关键拖放事件（按顺序）
整个拖放流程中，涉及两个角色：**拖拽源（drag source）** 和 **放置目标（drop target）**，各自监听不同事件：
-
dragstart：在拖动开始时触发（源元素）。常用于设置拖动数据（
event.dataTransfer.setData()）和自定义拖拽图标（event.dataTransfer.setDragImage()）。 - drag：拖动过程中持续触发（源元素），使用较少。
- dragend：拖动结束（无论是否释放到有效区域）时触发（源元素）。
-
dragenter：被拖元素进入目标区域时触发（目标元素）。需调用
event.preventDefault()才能让dragover和drop生效。 -
dragover：被拖元素在目标区域内移动时持续触发（目标元素）。必须阻止默认行为（
event.preventDefault()），否则浏览器会拒绝投放（这是最常被忽略的一步）。 - dragleave：被拖元素离开目标区域时触发（目标元素）。
-
drop：在目标区域松开鼠标完成投放时触发（目标元素）。此时可通过
event.dataTransfer.getData()获取之前设置的数据。
dataTransfer 对象：传递拖放数据的核心
event.dataTransfer 是所有拖放事件对象上的只读属性，用于在源与目标之间传递信息：
-
setData(type, data)：在dragstart中设置数据，如event.dataTransfer.setData('text/plain', 'item-123')。 -
getData(type)：在drop中读取对应类型的数据。 -
clearData([type])：清除已设置的数据。 -
types：返回已设置的数据类型数组（可用于判断支持哪些格式）。 -
files：如果拖入的是文件（如从桌面拖进页面），可通过此属性访问FileList。
实用小技巧与常见问题
实际开发中容易卡在几个地方：
立即学习“Java免费学习笔记（深入）”；
- 目标元素默认不允许接收投放 —— 必须给
dragenter和dragover都加event.preventDefault()。 - 想让目标区域高亮？可在
dragenter添加 CSS 类，在dragleave或drop中移除。 - 避免文字被选中干扰拖拽：可在
dragstart中调用event.target.style.userSelect = 'none'，或统一用 CSSuser-select: none。 - 移动端不支持原生 Drag and Drop API —— 如需跨端，建议用
pointerdown/move/up自实现，或引入interact.js等库。
