JavaScript拖放功能通过dragstart→dragover→drop事件链和DataTransfer对象实现数据传递；需设draggable="true"、在dragover中preventDefault()、用setData()/getData()存取数据，且注意MIME类型一致与移动端兼容问题。
JavaScript拖放功能通过事件监听和DataTransfer对象协同实现，核心在于控制拖拽生命周期（dragstart → dragover → drop）并利用DataTransfer在源与目标间传递数据。
拖放功能的基本实现步骤
要让元素可拖拽，需满足两个前提：一是设置draggable="true"属性；二是监听关键事件并阻止默认行为。
-
触发拖拽：在
dragstart事件中，通过event.dataTransfer.setData(format, data)写入数据，例如event.dataTransfer.setData('text/plain', 'hello') -
允许放置：必须在
dragover事件中调用event.preventDefault()，否则drop事件不会触发 -
接收拖拽：在
drop事件中，用event.dataTransfer.getData(format)读取之前设置的数据，并执行插入、移动等业务逻辑
DataTransfer对象的核心作用
DataTransfer是拖拽过程中的“数据中转站”，它不直接操作DOM，而是提供标准化接口管理拖拽携带的信息。
-
存取数据：支持多种MIME类型（如
'text/plain'、'text/html'、'application/json'），同一份数据可按不同格式写入多次 -
控制拖拽外观：通过
setDragImage(element, x, y)自定义拖拽时的视觉反馈（如显示缩略图） -
标识拖拽状态：
effectAllowed（源端声明允许的操作，如'move'、'copy'）和dropEffect（目标端实际执行的效果）配合实现拖拽语义控制 -
处理文件拖入：当从系统拖入文件时，
dataTransfer.files返回FileList对象，可用于上传或预览
常见易错点与建议
很多拖放失效并非逻辑错误，而是忽略了浏览器默认策略或事件细节。
立即学习“Java免费学习笔记（深入）”；
- 忘记在
dragover里调用preventDefault()，导致drop不触发 - 使用
getData()时格式字符串与setData()时不一致，返回空字符串 - 对自定义数据（如JSON字符串）未做
JSON.parse()处理，直接当作对象使用会报错 - 移动端不支持原生
drag/drop事件，需改用touchstart/touchmove/touchend模拟，或引入interact.js等库
一个最小可用示例
以下代码实现文字从左框拖到右框：
<div draggable="true" id="source">拖我过去</div>
<div id="target">放到这里</div>
<script>
source.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.textContent);
});
target.addEventListener('dragover', e => e.preventDefault()); // 关键！
target.addEventListener('drop', e => {
e.preventDefault();
const text = e.dataTransfer.getData('text/plain');
target.textContent = text;
});
</script>
